Как получить ссылку на изображение из Google диска по id?

Question

[Ayan Bai]

У меня есть ссылка на изображение в google drive, след вида:
https://drive.google.com/open?id=0BzStSAirQJ2oREZG...

Мне необходимо в моем веб приложений отобразить это изображение в теге img

Вопрос, как в параметр src вставить ссылку на изображение чтобы она отобразилось.


ЗЫ: У меня таких ссылок около 500 штук, и их забили руками в таблицу. Перебивать их руками очень долго.

В моем приложений 3 файла:

Code.gs - который берет изображение из моего диска.
JavaScript.html - который по идее должен вставить изображение в тег img или вернуть ошибку если не получилось
Page.html - отображает результат.

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

[Alexander Ivanov]

Здравствуйте.

Берут сомнения меня, что CAJA, даже в режиме IFRAME, предоставляет нам DOM-документ. Все же, с большой вероятностью, это некий фарш LIKE_DOM = CAJA(DOM);

Поэтому инструкция, чтобы в нее не передавали, не будет "responsive":

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

Но, это же DOM, в конце концов! Создаем элемент, вместо изменения атрибута:
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';
}

Заметьте, нет никакой необходимости вызывать DriveApp. Он вам понадобится, только если изображение будет не в общем доступе. Тогда вам придется брать Blob, кодировать его в base64 и передавать слепок. Размер слепка не может превышать 10Мб.

И еще я заметил у вас
<?!= include('JavaScript'); ?>
Не забудьте, что шаблоны не исполняют асинхронного кода Load data asynchronously, not in templates, поэтому, создавая нечто объемное, постарайтесь выдать HTML как можно быстрее:

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