How to get image link from google drive by id?

Question

Google Drive

I have a link to an image in google drive, a trace of the form:
https://drive.google.com/open?id=0BzStSAirQJ2oREZG...
I need to display this image in the img tag in my web application
Question, how to insert into the src parameter link to the image to display it.

PS: I have about 500 such links, and they were hammered into the table by hand. Interrupt them with your hands for a very long time.
My application has 3 files:
Code.gs - which takes the image from my disk.
JavaScript.html - which is supposed to insert an image into an img tag or return an error if it
fails Page.html - renders the result.
Code.gs:

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}


function getImage (){ 
  return {image: DriveApp.getFileById("0BzStSAirQJ2oREZGYnM5MjBUZTQ")};
}

JavaScript.HTML

<script>
 function onSuccess(data) {
   console.log("onSuccess", data);
   document.getElementByTagName('img').src = data.image;
   }
   
 function onFailure(data) {
   console.log("onFailure", data);
   } 
  google.script.run.withFailureHandler(onFailure).withSuccessHandler(onSuccess).getData();

</script>

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<img src="" alt="" width="150" heigt="150"/>

<?!= include('JavaScript'); ?>

Answer 1

Hello.
I doubt that CAJA, even in IFRAME mode, provides us with a DOM document. Nevertheless, with a high probability, this is some stuffing LIKE_DOM = CAJA(DOM);
Therefore, the instruction, so that it is not passed to it, will not be "responsive":

document.getElementByTagName('img').src = data.image;

But, it's DOM, after all! Create an element instead of changing an attribute:
index.html

<div>
  <input type="button" onclick="showImage()" value="Click Me!" />
  <div id="app"></div>
</div>
<script>
  function showImage() {
    google.script.run.withSuccessHandler(doStuff).withFailureHandler(function serverFailureHandler(e) {
      console.log(JSON.stringify(e))
    }).getImageId();
  };
  function doStuff(id) {
    var img = document.createElement('img');
    img.src = 'https://drive.google.com/uc?export=download&id=' + id;
    document.getElementById('app').appendChild(img);
  };
</script>

Code.gs

function doGet(e){
  return HtmlService.createHtmlOutputFromFile('index');
}
function getImageId(){
  return '0BzStSAirQJ2oREZGYnM5MjBUZTQ';
}

Notice there is no need to call DriveApp. You will only need it if the image is not going to be shared. Then you have to take a Blob, encode it in base64 and send a cast. The size of the cast cannot exceed 10Mb.
And another thing I noticed from you. Don't forget that templates don't execute asynchronous code Load data asynchronously, not in templates , so when creating something big, try to render HTML as quickly as possible:
<?!= include('JavaScript'); ?>

function doGet(e){
  return HtmlService.createHtmlOutputFromFile('index');
}