Embedding image URL from google drive is actually easy. We just have to convert the URL we got from google drive from this format https://drive.google.com/file/d/[image_id]/view?usp=sharing to this format https://drive.google.com/uc?export=view&id=[image_id].

Even easier, just use this tool I make: gdrive-url-converter

I build this tool using React as I have not got a chance to play with React for a long time. It is a good exercise to flex my front-end muscle.

Repository can be found here: https://github.com/iahsanujunda/gdrive-image-url-converter

Reference

  1. https://dev.to/temmietope/embedding-a-google-drive-image-in-html-3mm9
  2. https://codepen.io/DrewJaynes/details/abJNNjb