🙆

GoogleDriveに保存した画像をimgタグで表示する

2019/06/17に公開

はじめに

マークダウン記法の社内Wikiを使用しており、説明の際に画像を使用したかったのですが、 サーバ容量の関係で、画像などを添付することは禁止されていました。

そこで、一旦画像をGoogleDriveに保存し、それを取得して表示させようとしました。

方法

画像(sample.jpg)をGoggleDriveにアップロードする

f:id:gdtypk:20210906155213p:plain

共有可能なリンクを取得する

画像を右クリックした後に、「共有可能なリンクを取得」を選択すると、URLが表示されるため、コピーしてください。

f:id:gdtypk:20210906155230p:plain

今回コピーしたURL

https://drive.google.com/open?id=1vBXi5cw051yaGFVURGGZYtU0oC6JN3EP

コピーしたURLを編集し、imgタグに使用する

書き方

http://drive.google.com/uc?export=view&id={コピーしたURLのID}

今回コピーしたURLの場合

http://drive.google.com/uc?export=view&id=1vBXi5cw051yaGFVURGGZYtU0oC6JN3EP

実際に表示してみる

<img src="http://drive.google.com/uc?export=view&id=1vBXi5cw051yaGFVURGGZYtU0oC6JN3EP" width="100px" height="100px"/>

↓の画像は、GoogleDriveから取得したものを表示しています。

おわりに

GoogleDriveでのファイル管理が少し煩雑になりそうなのが気になりますが、目的は達成することができました。 デメリットなどあれば、コメントにて教えて頂けると幸いです。

GitHubで編集を提案

Discussion