DEV Community

Embedding a Google Drive image in HTML

Temitope Ayodele on March 13, 2020

TL:DR- Convert the link generated by Google drive from https://drive.google.com/file/d/[image_id]/view?usp=sharing to https://drive.google...
Read full post
Collapse
 
deborahjacobs profile image
deborahjacobs •

I found this really helpful after almost 30 minutes of looking for a solution. Thank you!

Collapse
 
clarenceliu86 profile image
Clarence Liu •

This no longer works, new solution working as of July 2024 is: https://drive.google.com/thumbnail?id={ID}&sz=w1000

Make sure to set the sz param high if you want to show the whole image, otherwise it gets cut off.

Collapse
 
zmyaro profile image
Zachary Yaro •

The /thumbnail endpoint doesn't seem to work consistently if there are too many images on the page. I tried to load a page that had 10+ images embedded with that new format, and it rate limited me. I tried a bit later, and it worked, so it doesn't seem to consistently do that, but I can't ship this if there is a chance GDrive will do that.

Collapse
 
clarenceliu86 profile image
Clarence Liu •

Maybe don't load in parallel, if it's 10+ images async it'll probably rate limit you. Try to load placeholders and individually set the src to the image with a wait in between.

Thread Thread
 
zmyaro profile image
Zachary Yaro •

I might experiment with that, but even so, that makes it more difficult than the previous version, which you could use like any other image URL.

Collapse
 
drewapicture profile image
Drew Jaynes • • Edited

Thanks for this! I actually created a CodePen incorporating your solution to make it easier for a customer to convert their Drive URLs in this way. They just paste in the sharing URL, click Convert, and it replaces the URL with the embeddable version.

codepen.io/DrewJaynes/details/abJNNjb

Collapse
 
peteryeargin profile image
Peter Yeargin •

Hi Drew,

This is great. I noticed it's malforming the URL though. It looks like you're cutting off the in your output and truncating it.

Can you fix it as I'm definitely going to use this! :)

Best,
Peter

Collapse
 
spittal profile image
Jamie Spittal •

Hey friends, you probably have noticed this doesn't work anymore, there is a new URL that works, here is where I found that info: github.com/orgs/community/discussi...

And I've created a codepen to convert the share URLS into this new format.

codepen.io/Spittal/pen/KKEOYpQ

Collapse
 
twisha profile image
Twisha •

Thanks for this!

Collapse
 
temmietope profile image
Temitope Ayodele •

Glad it helped!

Collapse
 
mccmikey profile image
MCCMikey •

As of about a week ago, I believe this no longer works. Instead you get an error 400.

"That’s an error.

The server cannot process the request because it is malformed. It should not be retried."

Collapse
 
clarenceliu86 profile image
Clarence Liu •

Yea, new solution working as of July 2024 is: https://drive.google.com/thumbnail?id={ID}&sz=w1000

Collapse
 
limalex71 profile image
limalex71 • • Edited

you can use this link to convert

sites.google.com/view/usefulweb-de...