Menu
I want to display the image in a google apps script using src attribute. I put the folder id and the path. But the image couldn't display. I shared the folder here.
Thank you for your help!
https://drive.google.com/drive/folders/0ByNw-B9nXMcbMkxHTGt2X2xUTzQ
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('picture').setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p> Dispaly picture </p>
<p><img src="https://drive.google.com/drive/folders/0ByNw-B9nXMcbMkxHTGt2X2xUTzQ/200w.gif"> </p>
</body>
</html>
637
Return to Sheets and insert an image or drawing by selecting Insert > Image or Insert > Drawing. After inserting the image or drawing, click it. A small drop-down menu selector will appear in the top right-hand corner. Click it and choose Assign script.
The code uses the appendRow() method of the Sheet object to write a single row of data to the spreadsheet. To append a row, pass an array of values (corresponding to the columns) to the appendRow() method. For example, the code below appends a row containing two values: First name and Last name.
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.
88
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
