回答編集履歴
3
サンプルコード追加
answer
CHANGED
@@ -6,4 +6,37 @@
|
|
6
6
|
<img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />
|
7
7
|
```
|
8
8
|
|
9
|
-
とすると取得できそうですが、いかがでしょう?
|
9
|
+
とすると取得できそうですが、いかがでしょう?
|
10
|
+
|
11
|
+
今後ダウンロード URL の仕様が変わることも考えられるので、 Drive のダウンロード URL を Apps Script で取得するのが良いかと思いますので、そちらのサンプルものせておきます。
|
12
|
+
|
13
|
+
```JavaScript
|
14
|
+
const doGet = e => HtmlService.createTemplateFromFile('index').evaluate()
|
15
|
+
|
16
|
+
const getImageUrlById = id => DriveApp.getFileById(id).getDownloadUrl()
|
17
|
+
```
|
18
|
+
|
19
|
+
```HTML
|
20
|
+
<!DOCTYPE html>
|
21
|
+
<html>
|
22
|
+
<head>
|
23
|
+
<base target="_top">
|
24
|
+
</head>
|
25
|
+
<body>
|
26
|
+
<img id="image" />
|
27
|
+
<script>
|
28
|
+
const img = document.getElementById('image')
|
29
|
+
const fileId = ''// TODO: insert value
|
30
|
+
const url = google.script.run
|
31
|
+
.withSuccessHandler(url => {
|
32
|
+
img.src = url
|
33
|
+
})
|
34
|
+
.withFailureHandler(console.error)
|
35
|
+
.getImageUrlById(fileId)
|
36
|
+
</script>
|
37
|
+
</body>
|
38
|
+
</html>
|
39
|
+
```
|
40
|
+
|
41
|
+
サンプルコードは github に上げていますのでよかったらそちらもご参考ください。
|
42
|
+
[https://github.com/tanabee/drive-image-view-sample](https://github.com/tanabee/drive-image-view-sample)
|
2
修正
answer
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
|
2
1
|
[ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
|
3
2
|
|
4
3
|
## 追記分
|
1
追記
answer
CHANGED
@@ -1,2 +1,10 @@
|
|
1
1
|
Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
|
2
|
-
[ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
|
2
|
+
[ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
|
3
|
+
|
4
|
+
## 追記分
|
5
|
+
|
6
|
+
```
|
7
|
+
<img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />
|
8
|
+
```
|
9
|
+
|
10
|
+
とすると取得できそうですが、いかがでしょう?
|