How do I display images from Google Drive on a website?

Question

A client of mine has uploaded some photos to their Google Drive and would like me to display their photos on their company website. I reviewed the documentation for displayi

Answer 1

I have the same problem right now but this article helps me. Updates for the year 2020!

I got the solution from this article:
https://dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign

These are the steps from the article:

1. Upload your image to google drive.
2. Share your image from the sharing option.
3. Copy your sharing link (Sample: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
4. Copy the id from your link, in the above link, the id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
5. Have a look at the below link and replace the ID. https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r

After Replace ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

6. Now insert the link to your <img> tag.

And now it should work.

Answer 2

Update 18/02/2017 Google had depreciated free hosting feature on Google drive and now you cannot host your static website on Google drive for free.

But if you want to host your JavaScript and CSS and Images file on Google drive then you can still do so. You just need to obtain the permalink of the file. following updated tutorial (2017).

http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html

Answer 3

If the file is in a public folder, you can use Google Drive website hosting.

Answer 4

Extension of the above-mentioned answer. I wrote a UNIX command so I can easily do it in my workflow.

1. Copy the Google Drive photos URL which needs to be converted. E.g.

Copy Google Drive Image URL

https://drive.google.com/file/d/XXXX/view?usp=sharing

2. Open the terminal and execute this command.

Command:

echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6`

Output:

https://drive.google.com/uc?export=view&id=XXXX

P.S. If you copy the command from here. Make sure to copy the Google Drive image URL again. :P

No need to change anything in the Step 2 command as it takes from Clipboard. Make sure it is copied in right format E.g. https://drive.google.com/file/d/XXXX/view?usp=sharing

Answer 5

i supposed you uploaded your photo in your drive all what you need to do is while you are opening your google drive just open your dev tools in chrome and head to your img tag and copy the link beside the src attribute and use it

Answer 6

if you want to embedded Google drive images in your blogger or any sites then just follow the instructions : -

Blogger

1. upload the image on google drive
2. click on image and share with public
3. <img src='https://drive.google.com/uc?export=view&amp;id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>