Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference.

Any assistance with this matter would be greatly appreciated!

Link to Google Drive Folder

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> Displaying Image </p>
    <p><img src="https://drive.google.com/drive/folders/0ByNw-B9nXMcbMkxHTGt2X2xUTzQ/200w.gif"> </p>
  </body>
</html>
htmlgoogle-apps-script

Answer №1

When using the img src="" tag, make sure to input the direct URL of the image you want to display, not just the folder containing it. To find the correct link, open the image in a separate window or click the share option to obtain the proper URL.

The accurate link for your image is:

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

To properly use this link in the src attribute, add the fileID at the end of the following format URL:

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

Therefore, it should be formatted as follows:

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

REMINDER: The Google Drive file must be shared with 'anyone with the link' to allow other users to view the file or for external usage beyond G Suite.

Answer №2

Unfortunately, the solution provided by James Donnellan did not resolve my issue. While I was able to view the image when publishing the page, others were unable to see it. I double-checked the sharing settings and even attempted to publish with the "execute as me" option, but encountered the same problem.

Despite the simplicity of the aforementioned method, I wanted to share what ultimately worked for me in case others are facing similar difficulties. My successful approach involved converting the image to bytes:

Using App Script:

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

Here is the Javascript code:

google.script.run
.withSuccessHandler( function(bytes){ displayImage(bytes) })
.convertImageToBytes();

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

I hope this alternate solution proves helpful to others experiencing a similar challenge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

angular trustAsHtml does not automatically insert content

Two divs are present on the page. Upon clicking button1, an iframe is loaded into div1. The same applies to button2 and div2. These iframes are loaded via ajax and trusted using $sce.trustAsHtml. This is how the HTML looks: <div ng-bind-html="video.tru ...

javascripthtmlangularjsiframe

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

The functionality of classes containing <ul> elements is ineffective

Having recently embarked on the journey of learning html/css, I've encountered some confusion along the way. Allow me to showcase my basic web-page layout: <html> <head> <meta charset="utf-8"> <link rel = "stylesheet" type="text ...

htmlcss

Updating the innerHTML of a button with a specific id using Javascript is not possible due to it being "null."

My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...

javascripthtmlcssnull

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

htmlcss

Troubleshooting the fluid container problem in Bootstrap 3

I am currently working on a website using Bootstrap 3 framework. I have a specific section where I need to have two fluid containers placed side by side, each with different background colors. One of these containers should also include a background image ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

javascripthtmlcamera

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

htmlcsstailwind-css

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

What is the best way to align the items in the center of this container?

Check out this link: http://jsfiddle.net/zCXMv/18/ I'm having trouble getting this to work properly. Any assistance would be greatly appreciated. Here is the HTML code snippet: <div id="button" > <a class="button1 active" rel="1">&l ...

htmlcss

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...

phphtmlmysql

Customizing CSS for Internet Explorer browsers

I am looking to target specific CSS styles for Internet Explorer only, without affecting other browsers. Initially, I tried using conditional comments: <!--[if lt IE 7 ]><html class="ie6 ie"> <![endif]--> <!--[if IE 7 ]><html cl ...

htmlcssinternet-explorerconditional-comments

Generate additional tabs

Currently, I am in the process of working on a project where I have a bar that will contain dynamically filled tabs. My goal is to include a (+) image that becomes visible when the bar is full. When a user clicks on this image, the remaining tabs should ap ...

jqueryhtmlcss

Displaying recorded information from PHP/MySQL dropdown menu

My never-ending problem requires a simple solution. Despite searching online and in books, I can't seem to crack it. My goal is to display results from a drop-down menu that is currently connected to a database/table and showing the l_state as require ...

phphtmlmysql

Why is it that this JavaScript isn't working as intended in the popup form?

</br> s_foot"> * use ajax.jquery as control event. like $("#save").click(function(){.....}); <script type="text/javascript>" var wp; var position; var pid; var product_name; var production_date; In this script, I am attempting to retri ...

phpjavascripthtmljquery

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

htmlvue.jsvuejs2

Using rowspan to display JSON data in AngularJS

Unique Json data: [{ cityName: Seattle, population: 1000000, rank: 1 }, { cityName: Portland, population: 800000, rank: 2 }, { cityName: San Francisco, population: 900000, rank: 3 }, { cityName: Los Ange ...

htmljsonangularjs

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

htmlcssreactjsrenderviewport

What is the best way to arrange div elements in this particular manner using CSS?

Wanting to create a specific layout for my website by positioning some divs in a unique way and adding content to them, I have been focusing on responsive design. I am wondering if it is possible to position these divs while ensuring responsiveness. The de ...

htmlcss

Assigning the "action" attribute of a form to direct to the homepage

Working on a login form, I've encountered an issue with the action attribute when set to "index.cfm". This seems to work fine for all other pages except for the index page. Looking for some insights if anyone else has faced this problem before. I&apos ...

htmlformscoldfusion