Google Drive にある画像を iframeタグで表示する方法


● (No.1151) Google Drive にある画像を iframeタグで表示する方法 (2024年2月23日)
 -----------------------------------------------------------------------------

[Google Drive にある画像を iframeタグで表示する方法]
2024年1月2日に iframeタグによる新方法に仕様変更。Yahoo chiebukuro

 
[Google Drive にある画像を imgタグで表示する方法]
2023年12月までの imgタグによる旧方法。Qiita

 1. 画像ファイルを Google Drive にアップロード
 2. ファイル右クリック → 共有 → リンクを取得
 3. 左下の [全員] をクリック → リンクをコピー
 4. htmlタグに次を一行で記載。(fileID:xxxxxxxxxx)

<a href="https://drive.google.com/file/d/xxxxxxxxxx/view?usp=sharing"><img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing" width="300" border="0" /></a>
  or
<a href="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing"><img src="https://drive.google.com/uc?export=view&id=xxxxxxxxxx#dummy.jpg&usp=sharing" width="300" border="0" /></a>
  or
<a href="https://drive.google.com/uc?id=xxxxxxxxxx#dummy.jpg&export=download"><img src="https://drive.google.com/uc?id=xxxxxxxxxx#dummy.jpg&export=download" width="300" border="0" /></a>
  or
<iframe src="https://drive.google.com/file/d/xxxxxxxxxx/preview#dummy.jpg" width="300" height="168" frameborder="0"></iframe>


Example (Photo, 8 Apr 2021) <a href="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/view?usp=sharing"><img src="https://drive.google.com/uc?export=view&id=1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB#10408ang.jpg&usp=sharing" width="300" border="0" /></a> or <iframe src="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/preview#10408ang.jpg" width="300" height="168" frameborder="0"></iframe>
Example (Site, 5 Feb 2023) <a href="http://www.ne.jp/asahi/hamradio/je9pel/satslisd.htm"><img src="https://drive.google.com/uc?export=view&id=1R6ctF8dcj5c5WNj1slYYQdd9HHmZC20f#30205drk.png&usp=sharing" width="300" border="0" /></a> or <iframe src="https://drive.google.com/file/d/1R6ctF8dcj5c5WNj1slYYQdd9HHmZC20f/preview#30205drk.png" width="300" height="168" frameborder="0"></iframe>
Example (PDF, 4 Oct 2021)
<iframe src="https://drive.google.com/file/d/1oopO0clp_VwrYNEbs88FpsQSePAcpTCy/preview" width="300" height="70%" border="0"></iframe>
[Google Photo にある画像を imgタグで表示する方法] https://www.sukerou.com/2019/01/googleurl.html https://qiita.com/yumetodo/items/ac77043b28795516be14 <a href="https://lh3.googleusercontent.com/pw/xxxxxxxxxxw820-h615"><img src="https://lh3.googleusercontent.com/pw/xxxxxxxxxxw300-h225" border="0" /></a>
Example (Photo, 24 Sep 2021) <a href="https://lh3.googleusercontent.com/pw/AM-JKLXkKJqiPT-y3q512kJDu_i0vqBdyhXmtLE3AEFNiLaUFfmzgAmPXQq2DuBaa_z5nIm7U1xZsMrXT5m4a2TwegeF_ngHXw9cZYiATSMq6il6NOWmRpWhpoSVGbC1gajIwwFaqjskBTFvMUNzeb21AVyX=w820-h615"><img src="https://lh3.googleusercontent.com/pw/AM-JKLXkKJqiPT-y3q512kJDu_i0vqBdyhXmtLE3AEFNiLaUFfmzgAmPXQq2DuBaa_z5nIm7U1xZsMrXT5m4a2TwegeF_ngHXw9cZYiATSMq6il6NOWmRpWhpoSVGbC1gajIwwFaqjskBTFvMUNzeb21AVyX=w300-h225" border="0" /></a>
[Google Drive imagesキャッシュ] (13 May 2023) 最近、リンクを張ってある Google Drive上の全画像が 自局PC画面上に表示され ないことが度々起こるようになった。理由はわからない。そのような時は、次の 長い "……=sharing" までのURLをブラウザの検索欄にコピペ(単にクリックでも 可か?) して、Google Drive へ直接パスを物理的に通して MyImage(熱帯魚写真) を、いったん表示させてから元のサイトに戻り、再読み込みすると、見えていな かった画像が全て見えるようになるから不思議だ。他サイトや、Dropbox に保存 した画像にはこのような現象は生じない。他局PC上で自局サイトにアクセスして 画像が表示されないような時には、同じように試してみるとよいかもしれない。 https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/view?usp=sharing or FireFox cache clear: Settings - Privacy&Security - Cookies&SiteData - ClearData - ClearNow [Google Chrome と Google Drive の組合せ] (17 Jun 2023) この組み合わせは、画像表示が最強であることがわかった。 Microsoft_Edge や Firefox_Mozilla では、Google Drive に保存してある 画像ファイルの読み込み に時間が掛かったり、また画像ファイル全体がブラウザのディスプレイ上に表示 されないという現象が度々生じる。その点、表題の Google どうしの組み合わせ はそのようなこともなく、画像表示がとてもスムーズで、ストレスがない。 [Google Drive にある画像を iframeタグで表示する方法] (14 Jan 2024) Google Drive に保存した画像ファイルを、img srcタグでブラウザ上に縮小表示 させる今までの記述方法では表示できなくなったようなので、iframeタグで縮小 表示させる実験を継続中。次の画像は、小・中・大の三種類を表示させている。 Google の仕様が、2024年1月2日に変更になったことが判明。Yahoo wisdom bag (ex.) <iframe src="https://drive.google.com/file/d/1D48cbvGbaauNLUsyIev6zUDqJG5DLwbB/preview#10408ang.jpg" width="100" height="56" frameborder="0"></iframe> [YouTube にある動画を embedding する方法] (15 Jan 2024) <iframe src="https://www.youtube.com/embed/vsF0Muk_az8?rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen width="400" height="225" frameborder="0"></iframe> <iframe width="400" height="225" src="https://www.youtube.com/embed/vsF0Muk_az8?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> [Google Drive にある動画を videoタグで表示する方法] (17 Jan 2024) 他サイトにある動画の場合 <video controls muted width="400" height="225"><source src="https://www.static.tu.berlin/fileadmin/www/10002275/News/dorbit_scv015.mp4" type="video/mp4"></video> (C)TUB Asahi-netサーバーにある動画の場合 <video controls muted width="400" height="225"><source src="https://www.ne.jp/asahi/hamradio/je9pel/10713y12.mp4" type="video/mp4"></video> <video src="https://www.ne.jp/asahi/hamradio/je9pel/10713y12.mp4" controls muted width="400" height="225"></video> (実験成功) Google Drive にある動画の場合 <video controls muted width="400" height="225"><source src="https://drive.google.com/uc?export=download&id=1V3low0-yx4LceAr5FkmFEptnl4V0faeV#10713y12.mp4" type="video/mp4"></video> (実験途中) [Google Drive にある動画を iframeタグで表示する方法] (21 Feb 2024) Right-click on image -> Open application -> Preview -> Open new window on Other operations -> Embed item -> Copy and Paste <iframe src="https://drive.google.com/file/d/1V3low0-yx4LceAr5FkmFEptnl4V0faeV/preview#10713y12.mp4" width="400" height="225" allow="autoplay" frameborder="0"></iframe> <iframe src="https://drive.google.com/file/d/1V3low0-yx4LceAr5FkmFEptnl4V0faeV/preview#10713y12.mp4" width="400" height="225" hspace="2" vspace="2" frameborder="0"></iframe> (実験成功) https://mteam.jp/column/10229/ https://webliker.info/html/52510/ https://workspace-hack.com/drive-video-tag/ https://loki-creative.com/note/wp_googledrive/



トップ へ戻る.
前のページ へ戻る.
次のページ へ移る.
ホームページ(目次) へ戻る.