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]

Hey, Instead of using the link to the Google Drive folder, use 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

[Viviraje]

Thanks for your answer,
They look like you said. The were working until 2024, now the do not display:
If you could have a look to my index.html?
https://github.com/Viviraje/viviraje.github.io
Thank you!

[Swarup4545]

thank you so much @code-PA-32

[code-PA-32]

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=w1000

[Viviraje]

Many thanks! Now it works!
Why the old way does not work any more?
Where can I get this kind of news to do not get old fashioned on my html code?
Thank you very much!

[code-PA-32]

This happens since January 24 due to some Google updates
Check it here Google issue tracker

[Viviraje]

Thanks for your reply! Very helpful.
Have a great day!
Best regards

[JatiMuar]

NEW LINE OF CODE: https://drive.google.com/thumbnail?id={ID}&sz=w1000
👆 Image loaded resolution very low. How to load image for full resolution ?

[YasserAhmed1]

Here is the URL that worked for me:
<img src="https://lh3.googleusercontent.com/d/[FILE ID]=s[xxx]?authuser=0" >
Replace [FILE ID] with google drive file id and replace [xxx] with the image size such as 500 or 900 (the bigger number the higher resolution)

[MURGGAR]

thanks this was very help full