LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Sunday, August 12, 2018

Google Drive内の画像ファイルをHTMLのimgタグで表示したい

Update 2024/02

現在、この書き方で表示できるようです。
<img src="https://lh3.googleusercontent.com/d/FILE_ID">


2024/01に
<img id="source" src="https://drive.google.com/uc?export=view&id=FILE_ID">

で403が返ってきた時の回避策として見つけた

<image src="https://drive.google.com/thumbnail?sz=w1000&id=FILE_ID"/>  

でも以下のようなエラーが出てきました。

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameSite


回避する書き方の一つとして、上に書いた
https://lh3.googleusercontent.com/d/FILE_ID
FILE_IDにGoogleドライブにある画像ファイルのIDを入れると、Google Apps ScriptでデプロイしたWebアプリに、Googleドライブに保存してある画像を表示することができました。

以下3つでも表示できました。
<img src="https://lh4.googleusercontent.com/d/FILE_ID">
<img src="https://lh5.googleusercontent.com/d/FILE_ID">
<img src="https://lh6.googleusercontent.com/d/FILE_ID">


参考


さらに別の回避策を考えてみる

念のため、srcにURLを直接指定しない方法も試してみたので書き残しておきます。
以前 Googleドライブ内の画像をbase64にencodeしたデータを表示したい 時に書いた Utilities.base64Encode を利用する方法です。
複数画像を表示する場合には時間がかかるので向いていないかも。
(以下の例でindex.htmlの FILE_ID にGoogleドライブにある画像ファイルのIDを入れる)

例:

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

function returnBase64Data(fileId) {
const file = DriveApp.getFileById(fileId);
const blob = file.getBlob();
const contentType = blob.getContentType();
const base64Data = Utilities.base64Encode(blob.getBytes());
return "data:" + contentType + ";base64," + base64Data;
}

index.html
<!DOCTYPE html>
<html>

<head>
<style>
.img64 {
width: 20vw;
}
</style>

</head>

<body>
<div id="imgDiv"></div>
<script>
getImageData();

function getImageData() {
const fileId = "FILE_ID";
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.returnBase64Data(fileId);
}

function onSuccess(imageBase64) {
const img = document.createElement("img");
img.setAttribute("src", imageBase64);
img.setAttribute("class", "img64");
document.getElementById("imgDiv").appendChild(img);
}

function onFailure(e) {
alert([e.message, e.stack]);
}
</script>
</body>

</html>





Update 2024/01

現在はこのように書くと表示される。(追記:2024/02にこの回避策でもエラーが…)

<image src="https://drive.google.com/thumbnail?sz=w1000&id=FILE_ID"/>

FILE_IDはGoogleドライブにある画像ファイルのID)


参考:


以前は実現できていた以下の方法では403が返って来るようになりました。
上記の方法で回避できるようです。


ちなみに、過去にこのblogに投稿したいくつかの記事の画像リンクが
https://drive.google.com/uc?export=view&id=FILE_ID
になっていて表示されなくなっていた。(スクショしてクリップボードから貼り付けたやつかもしれない)
https://drive.google.com/thumbnail?sz=w1000&id=FILE_ID
に書き換えたら表示されるようになりました。

------------------------------------

Google Drive内の画像はこのように書くとimgタグで表示できるようです

調べて見つけた書き方を2つ書いておきます

  1. <img id="source" src="https://drive.google.com/uc?export=view&id=FILE_ID">
  2. <img id="source" src="https://drive.google.com/uc?id=ID&.png">



補足


Google Drive内の画像のリンクはこのようになっている
https://drive.google.com/file/d/FILE_ID/view?usp=sharing


そのままHTMLのimgタグのsrcに指定しても読み込んでくれない


こう書くと読み込んでくれるようになる
https://drive.google.com/uc?export=view&id=FILE_ID

またはこう書く
https://drive.google.com/uc?id=ID&.png


Latest post

Extracting data from Google Sheets with regular expressions

Introduction Regular expressions are a powerful tool that can be used to extract data from text.  In Google Sheets, regular expressions ca...