【2024年版】Google Driveの画像をimgタグで読み込む方法

2024年に入ってから、Google Driveの画像をimgタグ等で読み込むと403エラーが出て上手く表示されない現象が起きています。結論から言うと、Googleの仕様変更が影響しています。( 仕様変更のお知らせ – Google Workspace )

昨年まではGoogle Driveにアップロードしたメディアの共有リンクを発行してhttps://drive.google.com/uc?export=view&id=メディアのIDのURL形式に変換すれば読み込めましたが執筆時点(2024年1月17日)では使えません。

現状、Google Driveの画像をimgタグで読み込むには埋め込みコードを使う必要がありますのでこれについて解説したいと思います。

埋め込みコードを使って読み込む方法

  1. Google Driveにアップロードしたメディアを開く
  2. 共有リンクを発行する(共有 > リンクを知っている人全員)
  3. 右上のメニュー( Google Driveにアップしたメディアプレビュー画面の右上のメニューボタン )から新しいウィンドウで開くをクリック
  4. 右上のメニュー( Google Driveにアップしたメディアプレビュー画面の右上のメニューボタン )からアイテムを埋め込むをクリック

② 共有リンクを発行する

Google Driveにアップロードしたメディアの共有リンクを発行する(共有 > リンクを知っている人全員)際の画面

埋め込みコードを使用する場合も共有リンクを発行する必要があります。リンクを発行しなくても埋め込みコードは利用できますが、その場合は埋め込みコードの表示自体に閲覧制限がかかります。

③ 右上のメニューから新しいウィンドウを開く

Google Driveにアップロードしたメディアの詳細画面上部のメニューから「新しいウィンドウを開く」時のスクショ

右上のメニュー( Google Driveにアップしたメディアプレビュー画面の右上のメニューボタン )から新しいウィンドウで開くをクリックします。

④ 右上のメニューからアイテムを埋め込む

Google Driveにアップロードしたメディアの詳細画面上部のメニューから埋め込みコードを発行する際のスクショ

新しく開いたウィンドウで先ほどと同様に右上のメニュー( Google Driveにアップしたメディアプレビュー画面の右上のメニューボタン )をクリックすると、「アイテムを埋め込む」から埋め込みコードを発行することができます。

発行した埋め込みコードをウェブサイトに設置すればGoogle Driveにアップロードしたメディアをサイトに掲載することができます。埋め込みコード自体は<iframe>なのでCSSを使って見た目を大きく変更することはできないので注意。
うぇぶとまと / 雑食系エンジニア

なんで<iframe>やねん。欲しいのは直リンクであって埋め込みコードではない!

直リンクを発行する方法(今はNG)

  1. 共有リンクを発行する(共有 > リンクを知っている人全員)
  2. 共有リンクからIDを抽出する
  3. 抽出したIDを使ってURLを作成する

② 共有リンクからIDを抽出する

■ 共有リンク(例)
https://drive.google.com/file/d/1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZ/view?usp=sharing

発行した共有リンクからIDを抽出します、ここでいうIDとは/file/d//view の間にある値のことです。上記の例でいうと1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZがIDになります。

③ 抽出したIDを使ってURLを作成する

■ URLの雛形
https://drive.google.com/uc?export=view&id=ここに抽出したID

抽出したIDを使ってウェブサイト等で使える読み込み可能なURLを作成します。といっても難しいことはしません、上記のURLの雛形に抽出したIDをセットするだけです。下記は使用例になります。

<!-- URLの雛形 + 抽出したID -->
<img src="http://drive.google.com/uc?export=view&id=1VaLnPNQ4b8IVaFkljUcSurLKRrlxsruZ">

以上になります。

うぇぶとまと / 雑食系エンジニア

現状(2024年1月17日時点)だと埋め込みコードしか使えないのはかなり不便。直リンク(埋め込みコードじゃない方)が使える未来を待つとしますか、この辺がGoogle依存のデメリットよなー。

コメント (0)
うぇぶとまと|雑食系エンジニア
うぇぶとまと|雑食系エンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦する雑食系エンジニア。