JavaScript Google drive pictures are not showed in website

[onur_super_ai]

Hello,
I am new to javascript coding. I am displaying the table in the google sheet on the web with js. It pulls the data properly, but my pictures in google drive cannot be displayed properly in the last column in the table. When I get a link to any image on the internet, the image appears, but there is a problem with google drive image links.

GitHub - onur-var/google_sheet_stabil_v1

Contribute to onur-var/google_sheet_stabil_v1 development by creating an account on GitHub.

github.com

Could you you help me?
Thank you very much.

 

[Zakwan@MTH]

Hi there!
It sounds like you're doing a great job so far! The issue with Google Drive images is that their default sharing links don't work directly as image sources. You need to make sure the images are publicly accessible and then modify the link to be "direct."
Here's how you can fix it:

1. Go to your Google Drive, right-click the image, and select "Get link."
2. Make sure the sharing setting is set to "Anyone with the link can view."
3. Convert the link using this format:

Original link: https://drive.google.com/file/d/FILE_ID/view?usp=sharing
Direct link: https://drive.google.com/uc?id=FILE_ID

Replace FILE_ID with the actual file ID from your link. Use the direct link as the src in your <img> tag, and the image should show up in your table.

Let me know if you get stuck!

 

[onur_super_ai]

Hello, thank you for your reply.
Unfortunately, the problem was not solved even though I had already done the settings you mentioned.
Below are all the settings I made.

pwa_google_sheet

docs.google.com

Resimler - Google Drive

drive.google.com

 

[onur_super_ai]

Thank you very much

Hi there!
It sounds like you're doing a great job so far! The issue with Google Drive images is that their default sharing links don't work directly as image sources. You need to make sure the images are publicly accessible and then modify the link to be "direct."
Here's how you can fix it:

1. Go to your Google Drive, right-click the image, and select "Get link."
2. Make sure the sharing setting is set to "Anyone with the link can view."
3. Convert the link using this format:

Original link: https://drive.google.com/file/d/FILE_ID/view?usp=sharing
Direct link: https://drive.google.com/uc?id=FILE_ID

Replace FILE_ID with the actual file ID from your link. Use the direct link as the src in your <img> tag, and the image should show up in your table.

Let me know if you get stuck!

Thank you very much for your attention,
The reason why the image is not displaying properly is that the link format below is incorrect.

Wrong format

Screenshot_20240211_172129_Instagram.jpg

drive.google.com

Correct format

https://drive.google.com/thumbnail?id=1otmBJ3vQVgLyvSQVKS5eZBmfJG_2FPmF

 

[Zakwan@MTH]

Hello there!
Lets figure something about this, If you can share the screenshot of the logs that appear in the browser, maybe we can catch the error from there
Thanks!

 

[onur_super_ai]

Thanks to you I solved my problem. We don't have to looking for anymore.