2023年09月21日 更新

Google Driveの画像をimgタグで読み込む

どうも、クラゲジュニアです。

今回はGoogle Driveに保存した画像をWebページ上で一般公開できるようにするため、imgタグで読み込んでみます。

前準備

Google Drive上に画像を用意します。

右クリックメニューから共有→共有を選択します。

一般的なアクセスのドロップダウンボックスをリンクを知っている全員にします。

リンクをコピーをクリックします。するとクリップボードに下記のようなリンクがコピーされます。

https://drive.google.com/file/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/view?usp=sharing

最後に完了を押してポップアップを閉じます。

手順

コピー後のクリップボードからxxx...に該当する箇所を切り取り等で抜き出し、下記に示すimgタグ内の該当箇所にコピーします。

<img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" width = 100%>

後はHTMLファイル等に貼り付けてみてください！ 下記の写真はhackMD上で表示した例です。

以上です。