How to use <img src > in google apps script

The img src="" requires the URL of the actual image you want to display, not the folder that contains it. To get the correct link you need to open the picture in its own window or click share and get the link that way.

The correct link for your image is:

https://drive.google.com/file/d/0ByNw-B9nXMcbSTN2S2ZiYWprdzA/view

To use this in the src you need to add the fileID to the end of this format URL:

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

So it becomes:

https://drive.google.com/uc?export=download&id=0ByNw-B9nXMcbSTN2S2ZiYWprdzA

NOTE: The drive file must be shared with 'anyone with the link' for other users to be able to view the file or for use outside of G Suite.


For some reason the accepted answer from James Donnellan did not work for me. When I publish the page, I can see the image but others can not. I checked the sharing settings and also tried to publish with the "execute as me" option. Tried with given link too, same results.

Though the method mentioned above is much more simple to use, I would like to share what worked for me in case someone else is experiencing same problems. I used converting the image to bytes:

In App Script:

function loadImageBytes(){
var id = "your_drive_file_id"
var bytes = DriveApp.getFileById(id).getBlob().getBytes();
return Utilities.base64Encode(bytes);
}

In Javascript

google.script.run
.withSuccessHandler( function(bytes){ showImage(bytes) })
.loadImageBytes();

function showImage(bytes){
document.getElementById("ItemPreview").src = "data:image/png;base64," + bytes; 
}

Hope this helps anyone.