DEV Community

Cover image for Embed Or Display Image to HTML page from Google Drive
Imam Uddin
Imam Uddin

Posted on

Embed Or Display Image to HTML page from Google Drive

Hey there; here is a secret tip for you to display images from google drive to your HTML web page.

Step:01 Upload your image to google drive.
Step:02 Share your image from the sharing option.
Step:03 Copy your sharing link.
Your sharing link looks like as shown below:
https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing

Step:04 copy the id from your link, in the above link, id is: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Step:05 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

Step:06 Now insert the link https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp to your HTML img tag.

Note: This trick will more effective for you when you want to share your profile picture or portfolio image in your freeCodeCamp account, here is my freeCodeCamp Profile: https://www.freecodecamp.org/imamcu07

Thanx for reading this post.
If you have any suggestions, please place a comment.

imamcu07

Top comments (6)

Collapse
 
evil_regal_amy profile image
Amy Mateyka

I have a question, this is great and everything, but what if I want to host a full width image? I don't want thumbnail size, I want to host a Jumbotron gif image, our company's CMS has a very limited file size which doesn't account for animated gifs.

Collapse
 
anasseth profile image
Muhammad Anas Seth

for full width image replace 'thumbnail' with 'uc' in the URL.
drive.google.com/uc?id=14hz3ySPn-z...

Collapse
 
spunch4 profile image
spunch

Thanks so much. This is working good. if I want the original images, What should I do? T

Collapse
 
tiasaxena profile image
tiasaxena

This really helped me loads :D

Collapse
 
jameshubert_com profile image
James Hubert

Thank you! This kind of thing makes life easier for developers!!

Collapse
 
aditya04848 profile image
aditya04848 • Edited

Very very helpful, thank you so much for sharing.