Google Drive上のファイルをimgタグで表示させる時のURL

現象

以下は、Scrapboxでの例（fileIdは、Google Drive上のファイルに対するId）。 WindowsやAndroidでは画像展開されるが、iOS、iPadOSからは表示されない。

[https://drive.google.com/uc?id={fileId}&export=download#.png]

https://drive.google.com/uc?id={fileId}&export=downloadは、Google Drive APIで取得できるwebContentLinkである。

直接該当URLにアクセスすると、リダイレクトされるため、iOS、iPadOSからはセキュリティの観点でブロックされていると推測している。

類似事象

• <img src="https://drive.google.com/uc?id={fileId}">とすることでWindows、Androidでは問題なく表示できるが、iOSでは表示されない。
• <img src="https://drive.google.com/uc?id={fileId}">はリダイレクトされる。リダイレクトされるとiOSで表示できない。
• iOSでも、直接URLにアクセスしリダイレクト後の画像を表示すると、以降はキャッシュが切れるまでは、<img src="https://drive.google.com/uc?id={fileId}">の形式で表示できる。

Google Drive にある画像をimgタグで取得させるURLについて - Qiita
GoogleDriveに保存した画像ファイルをhtmlのimgタグで表示... - Yahoo!知恵袋

解決方法

2023年1月16日現在、Google DriveのURLを次の形式にすることで、Windows、Android、iOS、iPadOSでも表示できることを確認した。

https://lh3.googleusercontent.com/d/{fileId}>

Scrapboxでは、[https://lh3.googleusercontent.com/d/{fileId}#.png]。通常のHTMLであれば、<img src="https://lh3.googleusercontent.com/d/{fileId}">になる。

ただし、このURLは正規のURLではないため、Google側の仕様変更に伴い、変わる可能性は高い。 Displaying files (e.g. images) stored in Google Drive on a website - Stack Overflow を見ても、コロコロと仕様が変わっていることが伺える。

調査結果

以下、調査結果を記す。

Google Drive APIで取得できるLink

Google Drive APIで取得できるLinkはhttps://drive.google.com/uc?id=YOUR_FILE_ID&export=download'であった。 検証コードは以下の通り。

import google.auth
from googleapiclient.discovery import build
from googleapiclient.errors import HttpError

scopes = ["https://www.googleapis.com/auth/drive"]

def get_link(file_id):
    try:
        creds, _ = google.auth.default(scopes)
        service = build('drive', 'v3', credentials=creds) 
        file = service.files().get(fileId=file_id, fields='webViewLink,webContentLink').execute()

    except HttpError as error:
        print(F'An error occurred: {error}')
        file = None

    return file
 
if __name__ == '__main__':
    link = get_link('YOUR_FILE_ID')
    print(link)

{
  'webContentLink': 'https://drive.google.com/uc?id=YOUR_FILE_ID&export=download',
  'webViewLink': 'https://drive.google.com/file/d/YOUR_FILE_ID/view?usp=drivesdk'
}

参考URL

• Displaying files (e.g. images) stored in Google Drive on a website - Stack Overflow