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

Comments

[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.

[Muhammad Anas Seth]

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

[spunch]

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

[tiasaxena]

This really helped me loads :D

[James Hubert]

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

[aditya04848]

Very very helpful, thank you so much for sharing.