Embedding a Google Drive image in HTML

temmietope

Temitope Ayodele

Posted on March 13, 2020

Embedding a Google Drive image in HTML
TL:DR- Convert the link generated by Google drive from https://drive.google.com/file/d/[image_id]/view?usp=sharing to https://drive.google.com/uc?export=view&id=[image_id] for use in your image tag

Google drive makes it easy to host images online and share it anywhere. If you intend to add an image from your google drive account to you HTML code, it is pretty easy! In this write-up, I will show you a very quick way to go about it with 3 easy straight-forward steps.

Upload image to your google drive

First, go to your drive account (obviously, lol). Then you click on the New button and then add the image file (or folder) you wish to save on you Google drive, and tadaa! the image is now on your drive.

Get the shareable link

Right click on the image in your google drive and then select share. This will then lead to a modal display, then you select Get sharable link. Copy this link to clipboard.

Embed link in your code

A typical link is of this format https://drive.google.com/file/d/[image_id]/view?usp=sharing. Adding this to your img tag will not display the image. So what is the essence, yeah?
The link can be tweaked to https://drive.google.com/uc?export=view&id=[image_id]. This new link can be used on your image tags and image displayed as desired.

I hope you find this useful.
Cheers!

πŸ’– πŸ’ͺ πŸ™… 🚩
temmietope
Temitope Ayodele

Posted on March 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related