リンク内容
上の記事を参考にGoogleドライブ上にある画像をgasで作成したhtmlページに表示しようと試みましたが、Mac版Chrome、Windows10版Chromeでは正常に表示されるものの、その他のブラウザでは表示されなくて困っています。
下記が私の書いたコードです。
GoogleAppsScript
1function doGet() { 2 return HtmlService.createTemplateFromFile('index').evaluate(); 3} 4 5function getImageUrls() { 6 const IMAGES_FOLDER_ID = {画像が格納されているフォルダのID} 7 const urlToDisplay = 'http://drive.google.com/uc?export=view&id='; 8 const imageFiles = DriveApp.getFolderById(IMAGES_FOLDER_ID).getFiles(); 9 const imageFileUrlsArray = []; 10 11 while (imageFiles.hasNext()) { 12 const imageFile = imageFiles.next(); 13 const regExp = /https://drive.google.com/file/d/(.+)//; 14 const imageFileId = regExp.exec(imageFile.getUrl()); 15 imageFileUrlsArray.push(urlToDisplay + imageFileId[1]); 16 } 17 18 return imageFileUrlsArray; 19}
html
1<!DOCTYPE html> 2<html> 3<head> 4 <base target="_top" /> 5</head> 6<body> 7 <ul></ul> 8 9 <script> 10 google.script.run. 11 withSuccessHandler(function(imageUrls) { 12 for (let i = 0; i < imageUrls.length; i++) { 13 const ul = document.querySelector('ul'); 14 const li = document.createElement('li'); 15 const img = new Image(); 16 img.src = imageUrls[i]; 17 img.width = 256; 18 img.height = 256; 19 li.appendChild(img); 20 ul.appendChild(li); 21 } 22 }) 23 .withFailureHandler(function(result) { 24 alert('画像の取得に失敗しました', result); 25 }) 26 .getImagesUrls(); 27 </script> 28</body> 29</html>
どなたかご教授していただけないでしょうか?
表示されないときの具体的な状態とwebアプリケーションとして公開したときの設定を教えてください
説明不足で申し訳ありません。表示されない際の状態は、imgタグのsrcが間違っている時に表示される時の画面です。ですが、デベロッパーツールを開いて、ソースコード上のsrcをURL欄にコピー&ペーストすると画像が表示されます。srcに表示されているコードはhttp://drive.google.com/uc?export=view&id={画像ID}となっており、拡張子がついていない状態です。尚、画像は全てjpegファイルで試しています。「ウェブアプリケーションとして導入...」の時の設定は誰として公開するか、誰が閲覧できるか、は全て試しましたが、やはり表示されません。