wolf47
@wolf47
Айтишник, немного програмирую на JS

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

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

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

Вопрос, как в параметр src вставить ссылку на изображение чтобы она отобразилось.
%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%

ЗЫ: У меня таких ссылок около 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'); ?>
  • Вопрос задан
  • 3988 просмотров
Пригласить эксперта
Ответы на вопрос 1
oshliaer
@oshliaer
Google Products Expert
Здравствуйте.

Берут сомнения меня, что 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');
}

С уважением.
Больше ответов на русском языке тут Bit.Ly/rudrive и тут Bit.Ly/rugoogleapps.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы