如何在网站上显示来自Google云端硬盘的图像？

75

我的一个客户已将一些照片上传到他们的Google云端硬盘，希望我在他们的公司网站上显示他们的照片。我查看了用于在网页中显示Google云端硬盘内容的文档，但是看来，这只是在网页中显示内容的说明，它已经做到了。

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

谢谢。

google-drive-api 
— 阿甘
source
3
Google云端硬盘托管现已弃用。它于2016年8月31日停止工作。托管弃用时间表
— 艾伦·威尔斯
11
TL; DR：使用Google云端硬盘中的“获取链接”选项来获取URL并更改/ open？到/ uc？（例如：https://drive.google.com/open?id=xyz至https://drive.google.com/uc?id=xyz）。学分：@Richard在下面给出了答案
— Axel

Answers:

16

如果您有一些图像文件，只需将其上传到Google云端硬盘上的公共文件夹，然后从地址栏中复制其文件夹ID（例如0B0Gi4v5omoZUVXhCT2kta1l0ZG8）并将其粘贴到GDrives的表单中，然后选择您自己的别名（例如myimgs）和瞧！您可以使用http://gdriv.es/myimgs/myimage.jpg一张一张地访问图像。

如果要将整个文件夹嵌入到您的网站中（在框架中），则可以使用以下URL之一，用您自己的ID替换[folderID]：

如果您希望以XML或JSON获取文件列表，则可以使用YQL。

注意：您也可以使用Google+照片托管和嵌入您的图像。

— 纽泰
source
1
文件夹ID超过28个字符，这是GDrives期望ID多长时间。它适用于文件，但现在似乎已被文件夹破坏。
— Frank Bryce 2015年
由于字符数限制，对我的照片都不起作用。
— dshgna 2015年
5
GDrives使用Google Drive Hosting，该服务将于2016
— 。–笨拙的
1
不再是最佳答案。请参阅@Vishal Chopra的博客bloggerseolab.com/2017/02/…–
— C.Colden
2
griv.es似乎不相关了
— jöhg
105

使用Google云端硬盘中的“获取链接”选项获取网址。

<img>在HTML中使用标签，然后将链接粘贴到其中。

Open?将网址更改为uc?。

— 理查德
source
4
太好了，谢谢。这整天杀了我-您在哪里学到了这个小小的“技巧”（uc）宝石，以及为什么这种俗法并没有广为人知。现在回到融合表的制作上。
— MrGreggles '17
惊人！在2017年工作！
— Rainabba
嗯，通常的咒语是uc？export = view＆id = ...，但是似乎export = view是默认的！（export = download来触发保存对话框也可以派上用场）
— Chema
Chrome浏览器似乎无法缓存它
— Altiano Gerung
13
不适合我; 我的链接属于这种类型https://drive.google.com/file/d/XXXX/view?usp=sharing
— RJVB
39

我找到了一种无需使用外部站点即可实现的方法。

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

点击“在新窗口中打开”

— Quitiweb
source
2
有没有一种方法可以自动抓取该ID？
— mando222 '17
恐怕我还没有找到一种方法
— Quitiweb
使用正则表达式提取可能
— Vaulstein
1
Yup（2019年9月）
— 用户
设置了与google.com上的跨站点资源关联的Cookie，但未设置该SameSite属性。
— Germa Vinsmoke
28

嵌入Google云端硬盘图像的示例

原始网址：https：//drive.google.com/file/d/0B6wwyazyzml-OGQ3VUo0Z2thdmc/view

Paula Borowska摄

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

— 亚提
source
1
Aathi，它对我不起作用。即使在codepen中，如果我使用驱动器链接，它也不会显示图像。我们需要在驱动器中为文件提供任何设置吗？
— Aakriti.G
@ Aakriti.G您确定使用正确的ID吗？我设法将文件夹ID而不是图像ID复制了一段时间。您需要在新选项卡中打开图像以在URL中获取ID。
— RoarG
2
这真的很好。确保其在gDrive中为公用文件夹，并获取共享链接。我正在使用电子表格，在其中将gDrive生成的可共享链接粘贴到单元格中，然后使用此公式将其调整为适应此处所述的目的：Replace（[Img gDrive URL]，1,33，“ drive.google.com/uc ？export = view＆id =“）
— jöhg，
1
完美的：+1：为我工作！还需要弄清楚如何向gmail签名中添加自定义HTML，但最终还是对其进行了管理，这就像一个魅力，谢谢！
— 4uroraskye
10

从Google云端硬盘帮助页面：

要使用云端硬盘托管网页，请执行以下操作：

  1. 通过drive.google.com打开云端硬盘，然后选择一个文件。
  2. 点击页面顶部的共享按钮。
  3. 单击共享框右下角的高级。
  4. 单击更改...。
  5. 选择“在网络上公开”，然后单击“保存”。
  6. 关闭共享框之前，请从“链接到共享”下面的字段中的URL复制文档ID。文档ID是URL中斜杠之间的大小写字母和数字字符串。
  7. 共享如下网址：“ www.googledrive.com/host/[doc id]，其中[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]停止提供内容。更多信息

— 钟表匠
source
6
Google云端硬盘托管即将被弃用。 在Google云端硬盘上托管-弃用
— Alan Wells
由于去年托管被禁用而不再起作用
— rainabba '17
9

2017年2月18日更新 Google已淘汰了Google云端硬盘上的免费托管功能，现在您不能免费将静态网站托管在Google云端硬盘上。

但是，如果您要将JavaScript以及CSS和Images文件托管在Google驱动器上，则仍然可以这样做。您只需要获取文件的永久链接。以下更新的教程（2017）。

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

— 维沙尔·乔普拉
source
这是更新的答案和最相关的答案！@fmz
— C.Colden
链接不再有效。
— eskimwier19年
2
@eskimwier，您可以检查此替代链接
— Khalid ElSayed
7

如果您想将Google云端硬盘图片嵌入博客或任何网站中，请按照以下说明进行操作：-

博客

  1. 将图片上传到Google驱动器
  2. 点击图片并与公众分享
  3. <img src='https://drive.google.com/uc?export=view&amp;id=1OCx6mUEMbWcwCQbDePA5PeeOh'/>
— 绍拉夫·辛格
source
4

上述答案的扩展。我编写了UNIX命令，因此可以在工作流程中轻松完成此操作。

  1. 复制需要转换的Google云端硬盘照片网址。例如

复制Google云端硬盘图片网址

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

PS：如果您从此处复制命令。确保再次复制Google云端硬盘的图片网址。：P

无需更改第2步命令中的任何内容，就像从剪贴板中所做的一样。确保以正确的格式复制它，例如 https://drive.google.com/file/d/XXXX/view?usp=sharing

— Dinesh
source
我在php中使用，所以我用explode（'d /'，url）; 它的工作原理非常感谢
— Asesha George
1 
<img src="https://drive.google.com/uc?export=view&id=Your_Image_ID" alt="">

我在wordpress网站上使用，因为将图像文件存储在本地主机上会占用大量空间并减慢我的网站的速度

我使用textmate，因为使用“ alt / option”按钮可以轻松地同时编辑多个URL

— 瑞安·赫特（Ryan Herter）
source
1

我现在有同样的问题，但是本文对我有帮助。2020年更新！

我从本文获得了解决方案：https :
//dev.to/imamcu07/embed-or-display-image-to-html-page-from-google-drive-3ign

这些是本文中的步骤：

  1. 将您的图片上传到Google驱动器。
  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>标签。

现在应该可以了。

— 卡洛伊
source
0

我不知道有什么更好的方法，但是您可以使用php来挖掘页面。例如，如果您转到Google并共享一个文件夹，然后转到该文件夹​​，它将看起来像

https://drive.google.com/folderview?id=0B8TT0olkjsdkfji9jekbFF4LWc&usp=sharing

^^^不是真实的链接

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

然后使用php获取源代码

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

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

一旦这些图像链接显示了您想要的方式，只需将它们构建为div或表结构以显示在图库上，甚至可以添加一个灰色框元素以产生效果

— 用户3586571
source
0

在云端硬盘上公开托管图片的几种有趣的替代方法（不建议使用）：

1. Google相簿

如果您将图片上传到Google相册而不是云端硬盘，则会获得一个公共Web链接。

这种行为对我来说有点令人惊讶，但是链接非常长且随机，因此他们显然在实践“默默无闻的隐私”。

2. Google绘图

如果您使用“ Google绘图”程序（内置在云端硬盘中）创建图片，则可以按获取公共链接。File > Publish to Web

在此处输入图片说明

注意：如果您要共享现有图像，可以将其作为解决方案-将图像粘贴到编辑器中，然后将画布裁剪为图像（file > Page Setup）-但这样做有点麻烦。但是，如果您需要进行一些基本的图像编辑，或者尝试创建一个简单的图标/图形，我认为这很不错。

— 达斯汀·米歇尔（Dustin Michels）
source
0

1-在您的Google驱动器中创建一个文件夹；

2-将此文件夹设为公开（共享属性）

3-使用类似以下内容的图片src： https://drive.google.com/thumbnail?id=${imageId}&sz=w${width || 200}-h${height || 200}

— 麦孔·吉尔顿
source
0

我以为您将照片上传到驱动器中，所有需要做的就是打开Goog​​le驱动器时，只需打开chrome中的开发工具并转到img标签，然后复制src属性旁边的链接并使用它即可

— 安德鲁·纳姆
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.