DEV Community

Temitope Ayodele
Temitope Ayodele

Posted on

Embedding a Google Drive image in HTML

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.com/uc?export=view&id=[image_id] for use in your image tag

Google drive makes it easy to host images online and share it anywhere. If you intend to add an image from your google drive account to you HTML code, it is pretty easy! In this write-up, I will show you a very quick way to go about it with 3 easy straight-forward steps.

Upload image to your google drive

First, go to your drive account (obviously, lol). Then you click on the New button and then add the image file (or folder) you wish to save on you Google drive, and tadaa! the image is now on your drive.

Get the shareable link

Right click on the image in your google drive and then select share. This will then lead to a modal display, then you select Get sharable link. Copy this link to clipboard.

Embed link in your code

A typical link is of this format https://drive.google.com/file/d/[image_id]/view?usp=sharing. Adding this to your img tag will not display the image. So what is the essence, yeah?
The link can be tweaked to https://drive.google.com/uc?export=view&id=[image_id]. This new link can be used on your image tags and image displayed as desired.

I hope you find this useful.
Cheers!

Top comments (10)

Collapse
 
deborahjacobs profile image
deborahjacobs

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

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
 
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
 
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
 
limalex71 profile image
limalex71 • Edited

you can use this link to convert

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

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