如何在网站上显示Google云端硬盘中的图片？
我的客户已将一些照片上传到他们的Google云端硬盘,并希望我在他们公司的网站上展示他们的照片.我查看了在网页中显示Google云端硬盘内容的文档,但看起来这只是在网页中显示内容的说明.
我的问题是,如何直接在客户的网页上显示内容？
谢谢.
小智 88
使用Google云端硬盘中的"获取链接"选项获取网址.
<img>在HTML中使用标记并在其中粘贴链接.
Open?将URL 更改为uc?.
- 太棒了,谢谢.这一整天一直在扼杀我 - 你在哪里学习了这个小小的宝石"uc",以及为什么这个小问题并不广为人知.现在回到使用Fusion Tables做出精彩的表现. (4认同)
- 您可以使用 @quitiweb 的答案中提供的链接： <img src="https://drive.google.com/uc?export=view&id=XXX"> 并将 XXX 替换为您在获取时获得的 URL 中的 ID转到“获取链接”:^) (4认同)
- 大多数当前和工作的答案! (3认同)
- 不适合我; 我的链接属于`https：//drive.google.com/file/d/XXXX/view？usp = sharing` (3认同)
Qui*_*web 17
我找到了一种不使用外部网站的方法.
<img src="https://drive.google.com/uc?export=view&id=XXX">
https://gist.github.com/evansims/f23e2f49e3d4be793038
<a href="https://drive.google.com/uc?export=view&id=XXX">
<img src="https://drive.google.com/uc?export=view&id=XXX"
style="width: 500px; max-width: 100%; height: auto"
title="Click for the larger version." />
</a>
您需要获取图像的ID:单击"在新窗口中打开"并从URL获取ID.
- 有没有办法自动抓取该 ID？ (2认同)
- 这在 2021 年有效 (2认同)
niu*_*ech 16
如果您有一些图像文件,只需将它们上传到Google云端硬盘上的公共文件夹,从地址栏复制其文件夹ID(例如0B0Gi4v5omoZUVXhCT2kta1l0ZG8)并将其粘贴到GDrives的表格中,然后选择您自己的别名(例如myimgs)和瞧!您可以使用例如http://gdriv.es/myimgs/myimage.jpg逐个访问图像.
如果要在网站上嵌入整个文件夹(在框架中),可以使用以下URL之一,将[folderID]替换为您自己的ID:
- http://gdriv.es/myimgs/
- https://docs.google.com/folder/d/[folderID]/preview?rm=minimal
- https://drive.google.com/folderview?id=[folderID]
如果您希望以XML或JSON格式获取文件列表,则可以使用YQL.
注意:您也可以使用Google+照片来托管和嵌入图片.
- griv.es 似乎不再相关 (4认同)
- GDrives使用[Google Drive Hosting](https://support.google.com/drive/answer/2881970?hl=zh-CN),该广告将于2016年8月31日停止使用. (3认同)
Aat*_*thi 13
嵌入Google云端硬盘图像的示例
原始网址：https：//drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google Drive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
</body>
</html>谢谢https://codepen.io/jackplug/pen/OPmMJB
- 我喜欢你使用真实链接进行演示。如果我们可以看到它，则意味着它仍在工作：D (5认同)
- 这真的很好用。确保它是 gDrive 中的公共文件夹并获取可共享链接。我正在使用电子表格，将 gDrive 生成的可共享链接粘贴到单元格中，然后使用此公式使其适应此处所述的目的：Replace([Img gDrive URL],1,33,"https://drive.google .com/uc?export=view&id=") (2认同)
- 是的，这在 2021 年 6 月仍然有效。 (2认同)
gug*_*gol 11
来自谷歌驱动器帮助页面:
要托管带有云端硬盘的网页:
- 在drive.google.com上打开云端硬盘并选择一个文件.
- 单击页面顶部的"共享"按钮.
- 单击共享框右下角的"高级".
- 点击更改....
- 在Web上选择On - Public,然后单击Save.
- 在关闭共享框之前,请在"链接到共享"下方字段中的URL中复制文档ID.文档ID是一个由大写和小写字母组成的字符串,以及URL中斜杠之间的数字.
- 共享看起来像"www.googledrive.com/host/[doc id"的URL,其中[doc id]被您在步骤6中复制的文档ID替换.
任何人都可以查看您的网页.
如果你想在网站上看到你的图像,通常会在你的html中嵌入pic的链接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example image from Google Drive</title>
</head>
<body>
<h1>Example image from Google Drive</h1>
<img src="https://www.googledrive.com/host/[doc id]" alt="whatever">
</body>
</html>
注意:
从2015年8月31日开始,Google云端硬盘中面向用户和开发者的网络托管将被弃用.您可以继续使用此功能,为期一年,直到2016年8月31日,届时我们将停止通过googledrive.com/host/[doc id提供内容.更多信息
- 托管在Google云端硬盘上很快就会被弃用.[在Google云端硬盘上托管 - 弃用](https://support.google.com/drive/answer/2881970?hl=en) (6认同)
更新时间:2017年2月18日 谷歌已经在谷歌驱动器上折旧免费托管功能,现在你无法在谷歌驱动器上免费托管你的静态网站.
但是,如果您想在Google驱动器上托管JavaScript和CSS以及图像文件,那么您仍然可以这样做.您只需要获取文件的永久链接.以下更新教程(2017).
http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html
- @eskimwier你可以检查这个替代方案[链接](http://archive.is/oyUvL) (2认同)
小智 8
如果你想在你的博客或任何网站中嵌入谷歌驱动器图像，那么只需按照说明操作：-
博主
- 在谷歌驱动器上上传图像
- 点击图片并与公众分享
<img src='https://drive.google.com/uc?export=view&id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>
对上述答案的扩展。我写了一个 UNIX 命令，所以我可以在我的工作流程中轻松完成。
- 复制需要转换的 Google Drive 照片 URL。例如
复制 Google 云端硬盘图片网址
https://drive.google.com/file/d/XXXX/view?usp=sharing
- 打开终端并执行此命令。
命令：
echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6`
输出：
https://drive.google.com/uc?export=view&id=XXXX
PS 如果你从这里复制命令。确保再次复制 Google Drive 图片 URL。:P
无需更改第 2 步命令中的任何内容，因为它来自剪贴板。确保它以正确的格式复制 例如
https://drive.google.com/file/d/XXXX/view?usp=sharing
此方法允许您以所需的任何尺寸或分辨率嵌入图像：
在您的 Google 云端硬盘中创建一个文件夹
通过“共享”按钮公开文件夹（或图像本身）
复制 URL 并提取 ID。它应该看起来像
https://drive.google.com/file/d/ID-HERE/view?usp=sharing使用类似这样的内容作为图像 src：
https://drive.google.com/thumbnail?id=${imageId}&sz=w${width || 200}-h${height || 200}例子：
https://drive.google.com/thumbnail?id=ID-HERE&sz=w200-h200
w您可以修改和后面的数字h以获得您需要的任何大小。图像将被缩小以适应这些尺寸。
我现在有同样的问题，但这篇文章对我有帮助。2020 年的更新！
我从这篇文章中得到了解决方案：https :
//dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign
这些是文章中的步骤：
- 将您的图片上传到谷歌驱动器。
- 从共享选项共享您的图像。
- 复制您的共享链接（示例：https : //drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp= sharing ）
- 从你的链接复制id，在上面的链接中，id是：14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
- 查看以下链接并替换 ID。 https://drive.google.com/thumbnail?id=1jNWSPr_BOSbm7iIJQTTbl7lXX06NH9_r
替换 ID 后：https : //drive.google.com/thumbnail? id =14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
- 现在插入指向您的
<img>标签的链接。
现在它应该可以工作了。
小智 5
列表显示
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>
网格视图
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>
阅读更多信息：https : //thomas.vanhoutte.be/miniblog/embed-add-google-drive-folder-file-website/
| 归档时间： |
|
| 查看次数： |
137623 次 |
| 最近记录： |