如何在网站上显示Google云端硬盘中的图片？

时间：2013-03-21 20:26:43

标签： google-drive-api

我的客户已将部分照片上传到他们的Google Drive，并希望我在他们公司的网站上展示他们的照片。我查看了documentation在网页中显示Google云端硬盘内容的情况，但似乎这只是在网页中显示内容的说明。

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

感谢。

18 个答案:

答案 0 :(得分：69)

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

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

将网址中的Open?更改为uc?。

答案 1 :(得分：14)

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

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

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

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

答案 2 :(得分：14)

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

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

Click on “Open in new window”

答案 3 :(得分：11)

来自google drive help pages：

  

使用云端硬盘来托管网页：

     
      
  1. 在drive.google.com上打开云端硬盘并选择一个文件。
    2.   
  2. 点击页面顶部的“分享”按钮。
    3.   
  3. 点击共享框右下角的“高级”。
    4.   
  4. 点击更改....
    5.   
  5. 选择开启 - 在网络上公开，然后点击保存。
    6.   
  6. 在关闭共享框之前，请在“链接到共享”下方字段中的URL中复制文档ID。文档ID是一个字符串   大写和小写字母和数字之间的斜杠之间的数字   URL。
    7.   
  7. 分享看起来像“www.googledrive.com/host/[doc id”的网址，其中[doc id]被您在步骤6中复制的文档ID替换。
    8.         

    任何人都可以查看您的网页。

如果你想在网站上看到你的图像，通常会在你的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提供内容。 More info

答案 4 :(得分：7)

2017年2月18日更新 Google已经在Google云端硬盘上折扣免费托管功能，现在您无法在Google云端硬盘上免费托管您的静态网站。

但是如果您想在Google云端硬盘上托管您的JavaScript和CSS以及图片文件，那么您仍然可以这样做。您只需要获取文件的永久链接。以下更新教程（2017）。

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

答案 5 :(得分：5)

Google Drive Hosting现已弃用。它于2016年8月31日停止工作。

hosting on Google Drive - deprecation schedule

我已删除了之前如何在Google云端硬盘上托管图片的说明。

答案 6 :(得分：5)

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

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

Photo by 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

答案 7 :(得分：4)

列表视图

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

答案 8 :(得分：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>标签。

现在应该可以了。

答案 9 :(得分：1)

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

博客

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

答案 10 :(得分：0)

如 this Spanish blog 解释并提供链接转换器。

  1. 将您的图片上传到您的谷歌驱动器中。
  2. 与网络上的任何人分享。
  3. 复制分享链接。

然后您可以使用 ClasicWebTools 提供的转换器在您的网络上使用它。

答案 11 :(得分：0)

如果文件位于公共文件夹中，则可以使用Google Drive website hosting。

答案 12 :(得分：0)

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

答案 13 :(得分：0)

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

2-将此文件夹公开（在共享属性上）

3-使用类似以下内容的图片src： SELECT * FROM note

答案 14 :(得分：0)

上述答案的扩展。我编写了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

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

不需要像在剪贴板中那样在步骤2命令中进行任何更改。 确保以正确的格式复制 例如。 https://drive.google.com/file/d/XXXX/view?usp=sharing

答案 15 :(得分：0)

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

1。 Google相册

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

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

2。 Google绘图

如果您使用"Google Drawing" program（内置在云端硬盘中）创建图像，则可以按File > Publish to Web来获取公共链接。

enter image description here

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

答案 16 :(得分：0)

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

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

我使用textmate，因为使用'alt / option'按钮可以轻松编辑多个网址

答案 17 :(得分：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或表结构，以显示在一个画廊甚至可以添加一个greybox元素的效果

相关问题
最新问题