Apps Scriptリファレンス: Apps Script Reference ｜障害・課題追跡: IssueTracker ｜Google Workspace: Status Dashboard - Summary

2018年8月12日日曜日

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タグで表示できるようです

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

  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

Google Classroom API でクラスの一覧を取得したい

自分が指導・参加しているクラスの名称とIDを取得するコードを試しました 下記 Code.gs では pageSize で 100 を設定していますが 必ず 100件 返ってくるとは限らないらしいです https://developers.google.com/workspace/...