Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.

@TrevorPage

This comment has been minimized.

Copy link

@TrevorPage TrevorPage commented Feb 16, 2017

Thank you for this.

@isaackendall

This comment has been minimized.

Copy link

@isaackendall isaackendall commented Feb 19, 2017

Thanks, that works great.

@Quitiweb

This comment has been minimized.

Copy link

@Quitiweb Quitiweb commented Mar 14, 2017

This is working great. Thank you!

@zakaria-chahboun

This comment has been minimized.

Copy link

@zakaria-chahboun zakaria-chahboun commented Dec 7, 2017

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

@li2

This comment has been minimized.

@dominhhau

This comment has been minimized.

Copy link

@dominhhau dominhhau commented Mar 26, 2018

thank you so much !!

@muneneisaka

This comment has been minimized.

Copy link

@muneneisaka muneneisaka commented Aug 14, 2018

works like charm

@avtaylor

This comment has been minimized.

Copy link

@avtaylor avtaylor commented Nov 16, 2018

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

This comment has been minimized.

Copy link

@scarletks1214 scarletks1214 commented Apr 21, 2019

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

This comment has been minimized.

Copy link

@DazDotOne DazDotOne commented Jun 3, 2019

Amazing! Nice one.

@magicmathmandarin

This comment has been minimized.

Copy link

@magicmathmandarin magicmathmandarin commented Oct 13, 2019

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

This comment has been minimized.

Copy link

@lukeketchen lukeketchen commented Feb 18, 2020

This is amazing. Thank you

@Sessho-maru

This comment has been minimized.

Copy link

@Sessho-maru Sessho-maru commented Apr 21, 2020

Thanks you guy!

@JuanDValenciano

This comment has been minimized.

Copy link

@JuanDValenciano JuanDValenciano commented Apr 25, 2020

it works. Thank you very much!

@Zahara-Nour

This comment has been minimized.

Copy link

@Zahara-Nour Zahara-Nour commented May 2, 2020

Thank you !

@MuxiangP

This comment has been minimized.

Copy link

@MuxiangP MuxiangP commented Jun 17, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.