我的一个客户已将一些照片上传到他们的Google Drive，并希望我在他们公司的网站上显示他们的照片。我查看了在网页上显示 Google Drive 内容的文档，但似乎这只是在网页上显示内容的说明，它已经这样做了。
我的问题是，如何直接在客户端的网页上显示内容？
问问题
258672 次
18 回答
114
使用 Google Drive 中的“获取链接”选项获取 URL。
在 HTML 中使用<img>标签并将链接粘贴到那里。
将 URL更改Open?为uc?.
于 2016-01-25T14:01:36.913 回答
80
嵌入 Google Drive 图像的示例
原文网址：https: //drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc /view
您需要从原始 URL 中复制 ID（和 之间的字符/d/）/view，并在此 URL 中使用它：
https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc _
下图是使用这种方法嵌入的：
<!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>于 2018-08-28T22:36:50.467 回答
68
我找到了一种不使用外部站点的方法。
<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。
于 2017-03-14T12:51:32.127 回答
16
如果您有一些图像文件，只需将它们上传到您的 Google Drive 上的公共文件夹，从地址栏中复制其文件夹 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 + 照片来托管和嵌入您的图片。
于 2013-04-02T21:00:02.703 回答
11
更新 2017年 2 月 18 日谷歌已经贬低了谷歌驱动器上的免费托管功能，现在你不能在谷歌驱动器上免费托管你的静态网站。
但是，如果您想在 Google 驱动器上托管您的 JavaScript、CSS 和图像文件，那么您仍然可以这样做。您只需要获取文件的永久链接。遵循更新的教程（2017）。
http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html
于 2017-02-18T07:32:03.977 回答
10
要使用云端硬盘托管网页：
- 在 drive.google.com 打开云端硬盘并选择一个文件。
- 单击页面顶部的共享按钮。
- 单击共享框右下角的高级。
- 单击更改...。
- 选择开 - 在网络上公开，然后单击保存。
- 在关闭共享框之前，从“共享链接”下方字段中的 URL 中复制文档 ID。文档 ID 是 URL 中斜线之间的大小写字母和数字字符串。
- 共享类似于“www.googledrive.com/host/[doc id]”的 URL，其中 [doc id] 替换为您在第 6 步中复制的文档 ID。
现在任何人都可以查看您的网页。
如果您想在网站中查看您的图片，请像往常一样在您的 html 中嵌入图片链接：
<!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] 提供内容。更多信息
于 2015-06-20T19:01:07.580 回答
9
扩展上述答案。我编写了一个 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
于 2020-01-05T20:45:26.820 回答
9
我现在有同样的问题，但这篇文章对我有帮助。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>标签。
现在它应该可以工作了。
于 2020-10-29T13:52:22.833 回答
8
如果您想在您的博客或任何网站中嵌入 Google 驱动器图像，那么只需按照说明进行操作：-
博主
- 将图像上传到谷歌驱动器
- 点击图片并与公众分享
<img src='https://drive.google.com/uc?export=view&id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>
于 2019-09-13T17:58:50.850 回答
6
此方法允许您以所需的任何大小或分辨率嵌入图像：
在您的 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-07-22T20:12:41.070 回答
5
Google Drive Hosting 现已弃用。它从 2016 年 8 月 31 日起停止工作。
我已经删除了有关如何以前在 Google Drive 上托管图像的说明。
于 2013-12-11T06:40:36.367 回答
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/
于 2015-09-08T20:06:17.823 回答
2
<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">
我在我的 wordpress 网站上使用，因为在本地主机上存储图像文件会占用大量空间并减慢我的网站速度
我使用 textmate，因为使用“alt/option”按钮可以轻松同时编辑多个 URL
于 2018-05-25T11:05:01.037 回答
0
正如这个西班牙语博客所解释并提供了一个链接转换器。
- 在您的谷歌驱动器中上传您的图像。
- 与网络上的任何人分享。
- 复制分享链接。
然后您可以使用ClasicWebTools提供的转换器在您的网络上使用它。
于 2021-07-18T18:37:04.643 回答
0
我不知道更好的方法，但您可以使用 php 对页面进行数据挖掘。例如，如果您去谷歌并共享一个文件夹，然后转到该文件夹，它看起来像
https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing
^^^ 不是真正的链接
您正在寻找的是此页面源代码中的单个图像
然后使用 php 获取源代码
<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>
现在 $f 有了源代码，您可以使用其他 php 命令仅将 URLS 与您想要的图像分开。这将需要一些工作，但非常可行。
一旦你有这些图像链接显示你想要的方式，只需将它们构建到 div 或 table 结构中以显示在画廊上，甚至可能添加一个 graybox 元素以获得效果
于 2015-08-23T19:43:03.367 回答
0
在 Drive 上公开托管图像的几个有趣的替代方案（已弃用）：
1.谷歌照片
如果您将图片上传到 Google 相册而不是云端硬盘，则会获得一个公共网络链接。
这种行为让我有点意外，但链接很长而且很随机，所以他们显然是在实践“默默无闻的隐私”。
2.谷歌绘图
如果您使用“Google 绘图”程序（内置于云端硬盘）创建图像，您可以按下以获取公共链接。File > Publish to Web
注意：如果您尝试共享现有图像，这可能file > Page Setup是一种解决方案——将图像粘贴到编辑器中并将画布裁剪为图像 ( )——但这有点麻烦。但是，如果您需要进行一些基本的图像编辑，或者如果您正在尝试创建一个简单的图标/图形，我认为这很不错。
于 2019-02-07T22:31:07.457 回答
-2
如果文件在公共文件夹中，您可以使用Google Drive 网站托管。
于 2013-03-24T00:34:15.760 回答
-3
我想你把你的照片上传到你的驱动器中你需要做的就是当你打开你的谷歌驱动器时，只需在 chrome 中打开你的开发工具并前往你的 img 标签并复制 src 属性旁边的链接并使用它
于 2020-11-02T17:39:39.220 回答