GAS - ウェブアプリにGoogle Driveにある画像を表示させる方法

初めに

　本記事では、GASで作成するウェブアプリに Google Driveにある画像を表示する方法をまとめます。"Failed to load resource: the server responded with a status of 403 ()" とエラーが発生した場合の対応法も記載しています。

Index

手順

1. 表示したい画像の共有設定を「リンクを知っている全員」を「閲覧者」にする
   
2. 画像のファイルIDを取得する

   リンクをコピーする
   

   URLの下の画像の下線部がファイルIDです
   
   

3. 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 ()" とエラーが発生し、画像が表示されないことがあります。

　その場合は、このページで紹介したコードを試してみてください。

参考

stackoverflow.com
tonari-it.com