Embed Or Display Image to HTML page from Google Drive

Hey there! What’s up? Today I will show you a short trick for embedding or displaying an image to an HTML page from Google Drive.

Image To Editable Text Conversion By Using Google Drive

But not only the HTML page.

Share Google Drive Image To HTML Page

This trick will also help you to set your profile picture and portfolio picture in the freeCodeCamp profile. Because freeCodeCamp would not let you upload a profile picture or portfolio image. Let's start now…

First of all, upload your desired image to google drive. After completion of uploading, right-click on the image in the drive. Then you will see as below shown:

Share Google Drive Image

Now simply click on the “Share” Option, then the below screen will appear.

Share Google Drive Image

Now copy the link from the ‘Get Shared Link’ option.

Suppose your link looks like this:

https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing

Now copy the ID from the link; in the above link, it is:

4hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

Replace the id as shown below link:

https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

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

In this way, you can use a profile picture to your freeCodeCamp profile and portfolio image.

Thanx for coming to NextGen-Blog.

I have also published this post on my DEV profile.

You have time, please visit my Fiverr Gig

If you have any suggestions, please place a comment.

🤝 With thanx & ♥…✍
__________________________
😎 Imam Uddin, imamuddinwp;

Imam Uddin, imamuddinwp