Script that creates HTML that references files in google drive

4 days ago 9
ARTICLE AD BOX

Yes, you can use the file ID of a Google Drive file as the source for an <img> tag, but you need to make the file publicly accessible first. Here's how you can do it:

Make the File Public:

Go to your Google Drive. Right-click on the file (image) you want to use and select "Share". Under "General Access", change the setting to "Anyone with the link". Ensure the access level is set to "Viewer".

Get the File ID:

Open the file in Google Drive. The URL will look something like this: https://drive.google.com/file/d/FILE_ID/view. Copy the FILE_ID part from the URL.

Create a Public URL for the Image:

Use the following format to create a public URL for the image: https://drive.google.com/uc?id=FILE_ID Replace FILE_ID with the actual file ID you copied.

Use in an <img> Tag:

Use the public URL as the src attribute in your HTML file: <img src="https://drive.google.com/uc?id=FILE_ID" alt="Image Description">

When you follow these steps, your image should load correctly in the HTML file as long as the file is publicly accessible and the URL is valid.

DaveL17's user avatar

DaveL17

2,07512 gold badges30 silver badges48 bronze badges

Mason Wright's user avatar

New contributor

Mason Wright is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

3 Comments

I'm confused about step 3. If I just enter that URL into my browser (replacing FILE_ID with the fileid of the file that I got by copy link, and yes it's available to all users as viewers) I get an error 403, you don't have access to that page. is there some other step I'm missing?

2026-01-30T23:27:30.323Z+00:00

Looking more closely, step 3 is just creating the url to put into the img tag. But when I do that, it doesn't display the image.

2026-01-30T23:50:41.057Z+00:00

I'm really stumped by this. When I include the <img src=="drive.google.com/uc?id=... in my generated html, I just get the placeholder little picture instead of the actual picture. I'm sure I'm doing something dumb, since I've seen lots of answers that seem to say the same thing. I just can't get it to work for me.

2026-01-31T00:24:13.047Z+00:00

**Here is a tested approach and also some interesting article / info

1- Make the image accessible

In Google Drive, set the file’s General access to: Anyone with the link → Viewer

enter image description here

2- Click Copy Link and extract File_ID
EX: "https://drive.google.com/file/d/13nTC_avxxxxxxxxxxx-J2ddddYf/view?usp=sharing "
File_ID: 13nTC_avxxxxxxxxxxx-J2ddddYf

3- Use googleusercontent link pattern

<img src="https://lh3.googleusercontent.com/d/FILE_ID=w1000" alt="" />

enter image description here

Good Luck

pyshadi's user avatar

3 Comments

this doesn't work for me. instead of the image being displayed, it's just the placeholder icon.

2026-01-31T01:11:50.313Z+00:00

maybe you can post the section from your html?

2026-01-31T01:32:38.943Z+00:00

<img src="drive.google.com/uc?id=fileid" alt="xxx"> and i use a good fileid in place of fileid. also, when I put in a url to the same image hosted on my private server, it displays as it should. can you think of anything that could cause this?

2026-01-31T02:19:31.607Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.

Read Entire Article