(newbie question) - Unable to display an image in a table

Hi,

I am trying to transform in a table component a Google Drive URL into an image.

You can see the Google Drive URL here:

https://ibb.co/d5fqwgw

I am following the documentation on the topic here:

https://docs.uibakery.io/how-tos/file-management/display-files-from-google-drive-and-dropbox#converting-image-urls-from-google-drive

For some reason, I am not able to view the image in the table cell:

FireShot Capture 1046 - Kami Dashboard - Businesses Directory - UI Bakery - cloud.uibakery.io

When I right-click on the broken image icon and open it in a new tab, the image is properly displayed.

Do you have any idea where the problem could lie?

Thanks very much for your time and patience.

Kâmi

Hi @KBW,

The problem here is that the link does not point to an image, but rather it points to this imgbb site, which displays the uploaded image, think of it the same as our profile picture here on this current page. What you need to look out for, is that a link that points to an image, pretty much always has the file extension in the URL (.jpeg, .png, …).
For this you right-click the image on that link you shared and copy the image address
image
which looks like https://i.ibb.co/LZ0WX5X/Fire-Shot-Capture-1045-Kami-Dashboard-Businesses-Directory-UI-Bakery-cloud-uibakery-io.png (notice the .png at the end). And with that link you should have no issue displaying the image.

Also, you wrote

but it is not a google drive URL. You probably have the wording from the documentation, and yeah, just wanted to address that.

Hi [Max] Active UI Baker,

  1. Is the following link not a Google Drive link ?

https://drive.google.com/uc?id=1Q6xJaY7e-arMwSBIbCAOKUe91p2RGUFL

  1. Does it not follow the same format as the Google Drive link shown
    in the documentation on the page Displaying files from Google Drive and Dropbox in the section Converting image URLs from Google Drive ?

K.

Hello @KBW

The provided URL pattern should be working fine. I’ll double-check with the team to see whether any changes have been made and will get back to you.
Thank you!

Yeah, that link is a google drive link, but the one you posted in your original question is not:

Regarding your second question, the google drive link in your previous reply

does follow the format as shown in the documentation, so that one should display in the table.
Nevermind, I just tested it myself and it does not work easily like described in the documentation. I did not get it to work at all with /uc as the URL path; looking at the requests in the DevTools they’re all ERR_BLOCKED_BY_CLIENT so this might be an issue with the CSP being set wrong or other HTTP headers that block the image.

The only way I was able to get an image displayed is setting General access in google drive to Anyone with the link, like in this image


Then as written in the documentation, copying the id of the file into the link so we get

https://drive.google.com/uc?id=1EN6-MoGki9piploRLDhZr143tjYnpEtM

But, as I said before, it just wouldn’t work with the path set to /uc, so according to this answer on stackoverflow we need to change it to /thumbnail, so we get

https://drive.google.com/thumbnail?id=1EN6-MoGki9piploRLDhZr143tjYnpEtM

and this finally would display. But, depending on how big you need the image this might not be optimal, because in the end it still is just a thumbnail and displays with a default resolution of around 200px. So as the final step we can add &sz=w###-h### at the end of the link, where you can replace the # hashtags with the width and height of your choosing. If needed with high resolution, just set it to the images native resolution. Doing that, we end up with the final link:

https://drive.google.com/thumbnail?id=1EN6-MoGki9piploRLDhZr143tjYnpEtM&sz=w1280-h994

Note: I will leave the image these links point to public, so people can test with the links here. It should display the following placeholder image

Hope this helps :+1:t3:

2 Likes

Hey @Max,

Thanks for the investigation, nice job!
You’re right — Google broke it a year ago :melting_face:

We’ll add mentioned workaround with thumbnail in our docs :saluting_face:

1 Like