How to embed Google Drive image in HTML website or document - get a public link to the picture file

How to embed Google Drive image in HTML website or document - get a public link to the picture file

I had another idea how to use Google Drive to simplify teamwork, especially in the process of writing articles. In this post, I will describe how to insert pictures from Google Drive into pages of websites or documents.

One day I have a task in my work - I need to assign another person to write text or design a page with images. But I do not want to give the creator access to the server where these images will eventually be stored.

I got the idea that the creator can put these images on Google Drive and embed links to Google Drive in the HTML code of the page. And open access to the files via a link.

Then, for example, a copywriter could write an article, upload the files to Google Drive, and then you can go and download them. The problem is that you will have to rewrite the paths to the files manually if you want to change the names for SEO optimization. And you will also need to check that all references to google drive were replaced.

But on the standard link that we get when you open access, this method does not work. So you need to do some manipulations with it. To begin with, open access to the file to all users of the link with the rights of readers.

Copy the usual address that you get when you open access:

https://drive.google.com/file/d/16799-7TxQOpxLQnEqo76ODEMW_6cPfAf/view?usp=sharing

We need the numeric identifier of the file - between file/d/ and /view. Copy it, and paste it at the end of the new link:

https://drive.google.com/uc?export=view&id=COPIED_ID

Great, now you can use this address in img tags on created pages, articles, documents and so on.

Please rate this article
(5 stars / 1 votes)