如何在网站上显示来自 Google Drive 的图片?

我的一个客户上传了一些照片到他们的 谷歌硬盘,并希望我在他们的公司网站上展示他们的照片。我回顾了在网页上显示谷歌驱动器内容的 文件,但看起来这只是在网页上显示内容的说明,它已经这样做了。

我的问题是,我如何直接在客户的网页上显示内容?

299896 次浏览

如果文件位于公用文件夹中,则可以使用 Google Drive 网站托管

如果你有一些图片文件,只要把它们上传到你 Google Drive 上的 公众人士文件夹,从地址栏(例如 0B0Gi4v5omoZUVXhCT2kta1l0ZG8)复制它的 文件夹 ID,然后把它粘贴到 GDrives的表单中,选择你自己的别名(例如 我的意思是)——瞧!你可以使用例如 http://gdriv.es/myimgs/myimage.jpg来逐一存取图像。

如果你想在你的网站上嵌入一个完整的文件夹(在一个框架中) ,你可以使用以下 URL 之一,将[ folderID ]替换为你自己的 ID:

如果希望获得 XML 或 JSON 格式的文件列表,可以使用 YQL

注意: 您也可以使用 谷歌 + 照片来主机和嵌入您的图像。

谷歌驱动托管现在已经被废弃,它从2016年8月31日起停止工作。

主机在谷歌驱动器-弃用时间表

我已经删除了关于如何在 Google Drive 上托管图片的说明。

来自 谷歌驱动器帮助页面:

用驱动器托管网页:

  1. 打开 Drive.google.com 驱动器并选择一个文件。
  2. 单击页面顶部的“共享”按钮。
  3. 单击共享框右下角的 Advanced。
  4. 点击改变... 。
  5. 在网站上选择 On-Public,然后单击 Save。
  6. 在关闭共享框之前,从“ Link to share”下面的 URL 中复制文档 ID。文档 ID 是一个字符串 中斜杠之间的大小写字母和数字 网址。
  7. 共享看起来像“ www.googledrive.com/host/[ doc ID ] ,其中[ 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 Drive 将不再支持用户和开发者的网络托管服务。你可以在2016年8月31日之前的一年内继续使用这个特性,届时我们将停止通过 googledrive.com/host/[ doc id ]提供内容。更多信息

我不知道还有什么更好的方法,但你可以使用 php 数据挖掘这个页面。例如,如果你去谷歌和共享一个文件夹,然后去那个文件夹,它会看起来像

Https://drive.google.com/folderview?id=0b8tt0olkjsdkfji9jekbff4lwc&usp=sharing

^ ^ ^ 不是一个真正的链接

您正在寻找的是这个页面的源代码中的单个图像

然后使用 php 获取源代码

<? $f = fopen ("http://www.example.com/f", r);
echo $f;
?>

现在 $f 已经有了源代码,您可以使用其他 php 命令将 URL 与所需的图像分开。这将需要一点工作,但高度可行。

一旦你有了这些图像链接,显示出你想要的方式,只需要将它们构建成一个 div 或表结构,显示在画廊中,甚至可以添加一个 greybox 元素来达到效果

列表视图

<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/

使用“获取链接”选项在谷歌驱动器获取网址。

在 HTML 中使用 <img>标记,并将链接粘贴到其中。

将 URL 中的 Open?更改为 uc?

2017年2月18日更新 谷歌已经贬值免费托管功能在谷歌驱动器,现在你不能托管你的静态网站在谷歌驱动器免费。

但是如果你想把你的 JavaScript、 CSS 和图片文件放在 Google 硬盘上,你仍然可以这样做。你只需要获得文件的永久链接。更新教程(2017)。

Http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html

我已经找到了一种不使用外部网站的方法。

<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: 单击“ Open in new window”并从 URL 获取 ID。

Click on “Open in new window”

<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">

我在 wordpress 网站上使用,因为在本地主机上存储图像文件占用了很大的空间,并且减慢了网站的速度

我使用 textmate 是因为使用‘ alt/option’按钮可以很容易地同时编辑多个 URL

嵌入 Google 硬盘图像的示例

原始网址: https://drive.google.com/file/d/abc0/view

您需要从原始 URL (/d//view之间的字符)复制 ID,并在此 URL 中使用它:

Https://drive.google.com/uc?export=view&id=abc0

下面的图片是使用这种方法嵌入的:

Paula Borowska 拍摄

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Drive</title>
</head>
<body>
<img src="https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc">
<br>
<a href="https://drive.google.com/uc?export=download&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc" download>
Download
</a>
</body>
</html>

谢谢

在 Drive 上公开托管映像的一些有趣的替代方案(不推荐) :

1. 谷歌照片

如果你上传一张图片到谷歌照片而不是驱动器得到一个公共网络链接。

这种行为让我有点吃惊,但是链接是非常长和随机的,所以他们显然是在练习“隐私模糊”

2. 谷歌绘图

如果你使用 “谷歌绘图”程序(内置驱动器)的图像 创造,你可以按 File > Publish to Web得到一个公共链接。

enter image description here

注意: 如果您试图共享一个现有的映像——将该映像粘贴到编辑器中,并将画布裁剪到您的映像(file > Page Setup)——那么这个 可以是一个解决方案,但它有点麻烦。如果你需要做一些基本的图像编辑,或者如果你想创建一个简单的图标/图形,我认为这是漂亮的。

如果你想在你的博客或任何网站中嵌入谷歌硬盘图片,只需按照下面的说明:-

博主

  1. 把图片上传到谷歌硬盘上
  2. 点击图片与公众分享
  3. <img src='https://drive.google.com/uc?export=view&amp;id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>

扩展上面提到的答案。我写了一个 UNIX 命令,所以我可以很容易地在我的工作流中完成它。

  1. 复制需要转换的 Google Drive 照片 URL。

复制谷歌驱动器图像 URL

https://drive.google.com/file/d/XXXX/view?usp=sharing
  1. 打开终端并执行此命令。

命令:

echo https://drive.google.com/uc\?export\=view\&id\=`echo $(pbpaste) | cut -d '/' -f 6`

产出:

https://drive.google.com/uc?export=view&id=XXXX

如果你从这里复制命令,请确保再次复制 Google Drive 图片 URL

不需要修改步骤2命令中的任何内容,因为它取自剪贴板。 确保以正确的格式复制 例如。 https://drive.google.com/file/d/XXXX/view?usp=sharing

这个方法允许你以任何你需要的尺寸或分辨率嵌入图像:

  1. 在你的 Google 硬盘中创建一个文件夹

  2. 通过“共享”按钮使文件夹(或图像本身)公开

  3. 复制 URL 并提取 ID
    https://drive.google.com/file/d/ID-HERE/view?usp=sharing

  4. 使用这样的东西作为你的图像 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

您可以修改 wh之后的数字,以获得您需要的任何大小。图像将被缩小以适应这些尺寸。

我现在也有同样的问题,但是这篇文章对我有帮助。2020年更新!

我从这篇文章中得到了解决方案:
Https://dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign

以下是文章中的步骤:

  1. 上传你的图片到谷歌驱动器。
  2. 通过共享选项共享您的图像。
  3. 复制你的共享链接(样本: https://drive.google.com/file/d/14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp/view?usp=sharing)
  4. 从链接中复制 id,在上面的链接中,id 是: 14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp
  5. 看看下面的链接并替换 ID。 Https://drive.google.com/thumbnail?id=1jnwspr_bosbm7iijqttbl7lxx06nh9_r

更换 ID: https://drive.google.com/thumbnail?id=14hz3ySPn-zBd4Tu3NtY1F05LSGdFfWvp

  1. 现在插入到 <img>标记的链接。

现在应该可以了。

我想你上传了你的照片在你的驱动器所有你需要做的是,当你打开你的谷歌驱动器只是打开你的开发工具在 chrome 和头到你的 img 标签,并复制旁边的 src 属性的链接,并使用它

正如 这个西班牙博客所解释的,它提供了一个链路转换器。

  1. 上传您的图片在您的谷歌驱动器。
  2. 和网上的任何人分享。
  3. 复制共享链接。

然后您可以使用 经典网络工具提供的转换器在您的 Web 上使用它。

基于不同的答案,我创建了一个工具来帮助创建 HTML 嵌入代码或直接链接。

步骤1: 复制 Google Drive Url。

https://drive.google.com/file/d/18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH/view?usp=sharing

步骤2: 在 工具中传递 URL (检查屏幕快照)并点击生成链接,结果如下:

<a href="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH"> <img src="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH" width="100%"/></a>

如何使用工具-> 看说明书

链接到这里的工具-> 嵌入谷歌硬盘图片

enter image description here

<p><iframe frameborder="0" height="1000px" src="https://drive.google.com/[folder address]/embeddedfolderview?id=[folder id]#grid" width="100%"></iframe></p>

你可以很容易地得到文件夹的 ID,只要鼠标右键点击文件夹,复制共享链接,粘贴一些文本/HTML 文件在那里你得到的文件夹的 ID

嵌入谷歌硬盘的例子

<p><iframe frameborder="0" height="1000px" src="https://drive.google.com/a/esn.ac.lk/embeddedfolderview?id=19FWi2HI98Gim6VjZfHT391EBClO8Jxco#grid" width="100%"></iframe></p>
  1. 在 dgrive 的特定文件夹上传图像
  2. 将此图像作为拥有链接的视图敌人
  3. 复制链接,比如: https://drive.google.com/file/d/IMAGE_ID/edit
  4. 从链接中获取信息
  5. 使用带有以下链接的 id: drive.google.com/uc?export=view&id=IMAGE_ID

这个参考文献对于修复 html5图片的前景非常有帮助:

Https://www.emailonacid.com/blog/article/email-development/how-to-code-emails-for-outlook-2016/#images