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

Discussion (4)

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
tiasaxena profile image
tiasaxena

This really helped me loads :D

Collapse
jwhubert91 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.