Embed or display Image to html page from your 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.
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.

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

1 Like