How do I use a Google Drive image in HTML and on a website?

👤 Diwas Poudel 🕒 12 Oct 2022 📁 TECH

Google Drive allows you to store various types of content such as images, videos, PDFs, docs, applications, and many others, on their own Google hosting platform. In the case of images, Google Drive will generate its own version of the filename for each image you upload.

When you look carefully at the image name by right click on it and getting the URL, you will find the file name is changed to another form and will be different from what you provided earlier also images will not have any extensions like jpg, png, etc. This is google's way of securing the images in Google Drive.

When you want to share a file from Google Drive in some pages or blogs and want to use it in the img src tag of HTML by directly copying the link from Google Drive, it won't work because Google has protected your file from unauthorized access outside the Google domain. Even if you have shared the images, no one can use them outside of the Google platform. They can, for example, only open that image in Google Drive, Google Photos, and so on.

However, there is a way to use the images stored in Google Drive with a few hacks, and here are the steps for using Google Drive Images in HTML, blogs, and websites.

1 Login into your Google Drive and find the image you want to use on the Webpage.

image in google drive — **fig. Image which I want to share in Website and HTML img tag**

2 Right-click on the image you want in the blog or HTML IMG tag and click on Get Link.

click on image and get link — **fig. Right Click on the Image and Click on "Get Link"**

3 In the popup, click on the Copy link

Then you will get the link in ClipBoard. It looks like this:

https://drive.google.com/file/d/1I1vdwg3U3OJ2Zs0PshPc9wVIC19IMNNa/view?usp=sharing

This is the shareable link. when you go to the web browser and open this link in a web browser then it will open it as shown below.

Also read: Copy shared Google Drive files and folders to My Drive

4 Now, when you try to use this in the image tag in HTML as below.

shareable-link-in-img-tag — fig. Google Drive Shareable link in Image Tag Html

When you open this HTML page in a web browser then you will not get your image and the page will look like this:

image-of-google-drive-not-loaded — fig. showing google drive shareable link does not work in img tab of the web page

This shows that directly copying shareable links does not work.

To know how to use in IMG tag of HTML, you must have to get the URL ID of the image and in this above example, the URL ID is:

17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn

We must use this URL ID in below direct link syntax below.

http://drive.google.com/uc?export=view&id=URLIDHere

Now your Direct Links become like this:

http://drive.google.com/uc?export=view&id=17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn

Now let's insert this above direct link in the image tag in HTML as shown below.

<img .src="http://drive.google.com/uc?export=view&id=17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn">

Image:

Generated Direct Link from Shareable Link — **fig. Direct Link from shareable link Google Drive**

In this way, we have generated an image tag and this gets successfully displayed in the web browser as shown below.

image-loaded-successfully-from-direct-link-google-drive — fig. Image loaded successfully from generated google drive direct link

Also read: How to download protected/view only files from google drive?

What to do if I have a google drive link with usp=sharing?

If you have a link with usp=sharing like as below

https://drive.google.com/file/d/17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn/view?usp=sharing

Then you can use it on the website without usp=sharing as shown below.

https://drive.google.com/file/d/17EqBYdKTEXp43I4ITzRcWHPwr560a0Sn/

But But...

Let's look at some limitations of Google Drive

Some images in Google Drive that are private cannot work on the website. Furthermore, you cannot obtain links to photo collections and use them on your website, and only a single image can be used on your website's img src tag.

Conclusion:

You can generate a direct link from a shareable image link and use it in your image tag HTML, or you can simply copy the generated direct link and paste it into any website where you want to share the image content.