Images hosted on Google Drive are not displaying on a website hosted on GitHub Pages

[Viviraje]

Select Topic Area

Question

Body

Hello GitHub Pages community,
I'm having an issue with the images (hosted on public Google Drive folder) on my GitHub Pages-hosted website. The images aren't loading in any browser, not on desktop or mobile.
Last two months was working fine, and I did no changes. But now January 2024 are not displaying.
I've checked the image paths and they're correct. I've also checked the file permissions and the image files have the correct permissions. I've cleared the browser cache, but the problem is still there.
If anyone can help me fix this problem I would greatly appreciate it.

Link to website: https://viviraje.com
Repository: https://github.com/Viviraje/viviraje.github.io

Thank you,

[faridnec]

Instead of using the link to the Google Drive folder, have you tried using direct links to the images? To get the direct link, right-click on the image file in Google Drive, select "Get shareable link," and then replace /view or /edit in the link with /uc?export=view.

Before: https://drive.google.com/file/d/your_file_id/view
After: https://drive.google.com/uc?export=view&id=your_file_id

Or Instead of linking directly to the images, try embedding them using HTML tags with the src attribute pointing directly to the Google Drive image URL.

<img src="https://drive.google.com/uc?export=view&id=your_file_id" alt="Description">

Hope this helps

[faridnec]

I opened your HTML code, you probably can make some modif inside the img tag, it should use the file ID and construct the image URLs differently. I found one line missing https
Try replacing this lines

<img src="http://drive.google.com/uc?export=view&id=19tPz-nwOH2NkYgeJal79VZajEotOhuBK" class="foto-banner" alt="banner">

With this

<img src="https://drive.google.com/uc?export=view&id=19tPz-nwOH2NkYgeJal79VZajEotOhuBK" class="foto-banner" alt="banner">

I hope it can help. I don't have any idea about if all the images arent getting displayed but you can use console (usually accessible by right-clicking on the page and selecting "Inspect," then navigating to the "Console" tab). Look for any error messages related to the loading of images. This can provide additional information about what might be going wrong.

[Viviraje]

I did the https change on the line but still not displaying any images.
It does not display any images.
Thanks for your efforts!
https://viviraje.com

[blessu1201]

Has this issue been resolved? After yesterday's post, I discovered that photos that previously worked properly are not showing up. If you have solved it, please share.

[Viviraje]

This happens since January 24 due to some Google updates
Check it here Google issue tracker: https://issuetracker.google.com/issues/319531488?pli=1
See the example of the change:

OLD LINE OF CODE: https://drive.google.com/uc?export=view&id={ID}
NEW LINE OF CODE: https://drive.google.com/thumbnail?id={ID}&sz=w100

This change is working now!

[blessu1201]

Thank you for your help !

[JJfox30]

Hi there, I have the same problem.

Using google script and google sheets.

Index.html

Google sheet - example links

https://drive.google.com/file/d/1_BHXTVsok95o2kKXzWfQCP5yexS557Nj/view?usp=sharing

Any help will be appreciated.

Tks

[Viviraje]

Use this instead:
NEW:
https://drive.google.com/thumbnail?id=1_BHXTVsok95o2kKXzWfQCP5yexS557Nj&sz=w1000

OLD:
https://drive.google.com/file/d/1_BHXTVsok95o2kKXzWfQCP5yexS557Nj/view?usp=sharing

[blessu1201]

https://blessu1201.github.io/2024/01/18/google-drive-image-link.html

This is my page. You can convert url.

[JJfox30]

Hi, Viviraje.

I have a Google sheet and script for example.

I need to show many images in a Google script page.

Sincerely, I do not know how to change the code because I have to change both (script and sheet link).

This is the example to fix. https://docs.google.com/spreadsheets/d/1LhfK_tZj-R8kEuP7Ix1B6pGW3ZlX2-XrOCfKIibvG_4/copy

Thanks for your help.

Jordan (Brazil)

[Viviraje]

I am just a newbie, I can not help you, but may be any other user can do it. Good luck!

[JJfox30]

I am too.

Thank you.