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:

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.
After Replace ID:

Step:06 Now insert the link 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:

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


Top comments (6)

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.

anasseth profile image
Muhammad Anas Seth

for full width image replace 'thumbnail' with 'uc' in the URL.

spunch4 profile image

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

tiasaxena profile image

This really helped me loads :D

jwhubert91 profile image
James Hubert

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

aditya04848 profile image
aditya04848 • Edited

Very very helpful, thank you so much for sharing.

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.