CODEWITHSUNDEEP
google-apps-script
Cooper
Cooper

Reputation: 64032

Can't Display an image from google drive on a dialog or sidebar using google apps script

I have a script that I'm working on to learn more about the structure of Google Docs. It displays a lot of the structure I'm trying learn about in a sidebar. But I've been trying to display an image that is in this Google Doc that my script is contained in but it seems that no matter what I try I can't display the image thats already in Google Docs. So I uploaded another version of it to Google Drive and tried using Google Links as described in several StackOverFlow references but they just don't seem to be working. The only thing that seems to work reliably is to upload it to my website and use the url from that. Here's the snippet that's giving me the problems.

var br = '<br />';
var images=DocumentApp.getActiveDocument().getBody().getImages();
  if(images)
  {
    s+=br + '<strong>Body Images</strong>' + br + '<strong>Number of Images: </strong> ' + images.length;
    for(var i=0;i<images.length;i++)
    {
      s+=br + '<img src="http://myWebsite.com/GmailSignature.png" width="100"/>'; //This is the only thing I can get to work
      s+=br + '<img src="https://drive.google.com/open?id=0Bx2ds1-xxxxxxxxxxxxxxxxxxxx" width="100"/>';//There's several references on StackOverFlow.com that say this should work
      s+=br + '<img src="https://drive.google.com/uc?id=0Bx2ds1-xxxxxxxxxxxxxxxxxxxx&export=download" width="100" />';
    }
  }else{s+=br + '<strong>No Images in this Body element.</strong>';}

He's what my sidebar looks like with this code:

enter image description here

The link from my website works. The link from Google Drive does not. I just added that image to one of my google sites and took that url and that works as well. One of stackoverflow references suggest this <img src='https://drive.google.com/uc?id=" + imageId +'"' but what appears to be working for me is to turn that into this: <img src='https://drive.google.com/uc?id="' + imageId + '&export=download" />'.

Currently the only solution I have is to insert the image onto one of my google sites(old style). Save the page and get the url with developer and that works every time. I'm hoping there is or atleast will be in the future a simpler method. In this situation, it would be preferable to be able to use the image directly out of the Google Docs Document.

Upvotes: 0

Views: 2111

Answers (1)

Cooper
Cooper

Reputation: 64032

Using images from Google Drive in Dialog and Sidebars

I think my problem was that I wasn't always using the id from the shareable link and possibly I may have not always set it up to be publicly accessible. I just did this little example and they all work just fine and they include some ways that I had problems getting to work in the past.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <img src="https://drive.google.com/uc?id=ShareableLinkID&export=download" width="200" />
    <img src="http://drive.google.com/uc?export=view&id=ShareableLinkID" width="200" />
    <img src="https://drive.google.com/uc?id=ShareableLinkID" width="200" />

  </body>
</html>

Upvotes: 2

Related Questions