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 (13)
I found this really helpful after almost 30 minutes of looking for a solution. Thank you!
This no longer works, new solution working as of July 2024 is:
https://drive.google.com/thumbnail?id={ID}&sz=w1000Make sure to set the
szparam high if you want to show the whole image, otherwise it gets cut off.The
/thumbnailendpoint 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.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
srcto the image with a wait in between.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.
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
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
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
Thanks for this!
Glad it helped!
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."
Yea, new solution working as of July 2024 is:
https://drive.google.com/thumbnail?id={ID}&sz=w1000you can use this link to convert
sites.google.com/view/usefulweb-de...