回答編集履歴

3

サンプルコード追加

2020/05/04 09:00

投稿

tanabee
tanabee

スコア96

test CHANGED
@@ -15,3 +15,69 @@
15
15
 
16
16
 
17
17
  とすると取得できそうですが、いかがでしょう?
18
+
19
+
20
+
21
+ 今後ダウンロード URL の仕様が変わることも考えられるので、 Drive のダウンロード URL を Apps Script で取得するのが良いかと思いますので、そちらのサンプルものせておきます。
22
+
23
+
24
+
25
+ ```JavaScript
26
+
27
+ const doGet = e => HtmlService.createTemplateFromFile('index').evaluate()
28
+
29
+
30
+
31
+ const getImageUrlById = id => DriveApp.getFileById(id).getDownloadUrl()
32
+
33
+ ```
34
+
35
+
36
+
37
+ ```HTML
38
+
39
+ <!DOCTYPE html>
40
+
41
+ <html>
42
+
43
+ <head>
44
+
45
+ <base target="_top">
46
+
47
+ </head>
48
+
49
+ <body>
50
+
51
+ <img id="image" />
52
+
53
+ <script>
54
+
55
+ const img = document.getElementById('image')
56
+
57
+ const fileId = ''// TODO: insert value
58
+
59
+ const url = google.script.run
60
+
61
+ .withSuccessHandler(url => {
62
+
63
+ img.src = url
64
+
65
+ })
66
+
67
+ .withFailureHandler(console.error)
68
+
69
+ .getImageUrlById(fileId)
70
+
71
+ </script>
72
+
73
+ </body>
74
+
75
+ </html>
76
+
77
+ ```
78
+
79
+
80
+
81
+ サンプルコードは github に上げていますのでよかったらそちらもご参考ください。
82
+
83
+ [https://github.com/tanabee/drive-image-view-sample](https://github.com/tanabee/drive-image-view-sample)

2

修正

2020/05/04 08:59

投稿

tanabee
tanabee

スコア96

test CHANGED
@@ -1,5 +1,3 @@
1
- Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
2
-
3
1
  [ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
4
2
 
5
3
 

1

追記

2020/05/04 08:50

投稿

tanabee
tanabee

スコア96

test CHANGED
@@ -1,3 +1,19 @@
1
1
  Google Drive の画像は img タグの src 属性に URL を挿入する想定では作られていないと思います。
2
2
 
3
3
  [ご参考にされた記事](https://qiita.com/TechnoKuRo/items/622c3dcc2ff3f7e09474#%E8%A7%A3%E6%B1%BA) の後の方にも書いていますが、 Google Apps Script で Google Drive の画像取得の関数を用意して、クライアントから呼んであげると環境に依存せずに表示できるはずです。
4
+
5
+
6
+
7
+ ## 追記分
8
+
9
+
10
+
11
+ ```
12
+
13
+ <img src="https://drive.google.com/uc?id=[ File ID ]&export=download" />
14
+
15
+ ```
16
+
17
+
18
+
19
+ とすると取得できそうですが、いかがでしょう?