初めに
本記事では、GASで作成するウェブアプリに Google Driveにある画像を表示する方法をまとめます。"Failed to load resource: the server responded with a status of 403 ()" とエラーが発生した場合の対応法も記載しています。
手順
- 表示したい画像の共有設定を「リンクを知っている全員」を「閲覧者」にする
- 画像のファイルIDを取得する
リンクをコピーする
URLの下の画像の下線部がファイルIDです
- HTMLに画像を表示するためのコードを記述する
<img src="https://lh3.google.com/u/0/d/{画像のID}" alt="画像">
これで画像が表示されます。
補足
GASでウェブアプリに画像を表示させる方法を調べると、よく下記のようなコードが紹介されています。
<img src="https://drive.google.com/uc?id={画像のID}" alt="画像">
このコードを使うと、下記のように "Failed to load resource: the server responded with a status of 403 ()" とエラーが発生し、画像が表示されないことがあります。
その場合は、このページで紹介したコードを試してみてください。
