Skip to content

Instantly share code, notes, and snippets.

@evansims
Last active February 5, 2024 16:52
  • Star 66 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save evansims/f23e2f49e3d4be793038 to your computer and use it in GitHub Desktop.
Embedding or sharing a image or photo uploaded to Google Drive.
<a href="https://drive.google.com/uc?export=view&id=XXX"><img src="https://drive.google.com/uc?export=view&id=XXX" style="width: 500px; max-width: 100%; height: auto" title="Click for the larger version." /></a>

You'll need to grab the ID of the image. Easiest way on the desktop is to right click the file, dive into the Google Drive subcontext menu and choose View on the Web. Grab the string of characters from there and replace the XXX in the code below with it.

@isaackendall
Copy link

Thanks, that works great.

@Quitiweb
Copy link

This is working great. Thank you!

@zakaria-chahboun
Copy link

work if you open google account in your browser - try it in private window

@li2
Copy link

li2 commented Mar 9, 2018

@dominhhau
Copy link

thank you so much !!

@munenendereba
Copy link

works like charm

@avtaylor
Copy link

I think this only works for public files i.e., those that are on a public folder in google drive), not for general shareable links of photos.

@scarletks1214
Copy link

I am a trying to create gif file with the images on google drive on my website(react webapp);
I am using gifshot package to create gif.
I have cors error when I use unshared image files.

I need a help in this issue.
Regards

@DazDotOne
Copy link

Amazing! Nice one.

@magicmathmandarin
Copy link

This article helps me solve my problem https://confluence.biola.edu/display/itservices/How+to+Embed+Images+from+Google+Drive+in+a+Web+Page

Thanks to li2. It works.

@lukeketchen
Copy link

This is amazing. Thank you

@Sessho-maru
Copy link

Thanks you guy!

@JuanDValenciano
Copy link

it works. Thank you very much!

@Zahara-Nour
Copy link

Thank you !

@MuxiangP
Copy link

Is there a way to host folders and folders of images without needing to get a link for each image with Google Drive? Thanks!

@selaudin
Copy link

selaudin commented Nov 2, 2020

thank you!

@raunaqsahni
Copy link

Hello, since the Google Drive interface has now changed and doesnt allow advanced sharing options, I am not able to link Google Drive images to my website using HTML and CSS using this solution. Does anyone know what I can do?

The code I get after publicly sharing my image looks something like this. PS- I am just providing the link below for reference and have changed a few letters from the original ID so it wont work on your computer
https://drive.google.com/file/d/1_mdyuy_RGoY_FejdIpCWWtUc0Qn7MQyl/view?usp=sharing

@Pioneer18
Copy link

Saved me a ton of time, thanks!

@ildarius
Copy link

ildarius commented Jan 7, 2021

New format that works in 2021 is. You need to be a g suite user though and file needs to be in a publicly shared folder

img src="https://drive.google.com/a/YOURDOMAIN.COM/thumbnail?id=YOUR_FILE_ID&sz=wYOUR_DESIRED_WIDTH"

@piotr-bujnowski
Copy link

Thank you so much @evansims! 😃👍

@anderskitson
Copy link

anyone looking to strip the id from a url this worked for me

var url = https://drive.google.com/open?id=yourID
var id = url.field2.split("?")[1].split("id=");
console.log(id[1])

@ideals616
Copy link

Thank you so much @ildarius.
I resolved the image showing problem from google drive.

@LaisGalvao
Copy link

Thank you so much for this!! It's working fine!

@abdurrahman6489
Copy link

I am using google drive list api to get all the images from my drive. I'm getting id, name and webviewlink from the drive list api and sending the list of ids and webview links to my react application. but nothing is working for me. I tried drive image, but still not working for me. Anyone has the solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment