如何将 Google Drive 图片嵌入网页？答案

【问题标题】：How to embed Google Drive images into a webpage?如何将 Google Drive 图片嵌入网页？
【发布时间】：2016-07-27 05:53:10
【问题描述】：

我有一个正在设计的网站，我想使用谷歌驱动器中的一个文件夹来存储图像。问题是我似乎找不到如何获取这些图像的 URL。这个的实际用途需要是任何拥有 google 文件夹权限的人都可以放入图片，并且在您加载页面时会显示出来。

我已经弄清楚了 php 循环，我只是缩短了 <img src="" > 的路径。

目前，即使只是从谷歌驱动器静态获取一张图片也是一个开始。

【问题讨论】：

检查这张 SO 票 15557392 和 10311092 如果它可以帮助你:)

标签： php html google-drive-api

【解决方案1】：

如果我了解您的目标，那就是托管来自 Google 云端硬盘的图像。环顾社区，发现了一些我认为是您正在寻找的东西，或者至少可以帮助您了解如何去做。

首先，来自这个answer。你只需要使用这种 URL 格式：

https://drive.google.com/uc?export=view&id=<fileId>

-- 提供文件 ID。不过有一个注意事项，注意：此链接似乎受配额限制。所以不适合公开/大规模分享。但这证明您可以从文件驱动器中检索文件（在您的情况下为图像）。

其次，是来自上述同一帖子的top answer。简单地说这是很有可能的，只要您将文件放在 公共文件夹 中，然后使用以下 URL 检索它：

https://googledrive.com/host/<folderID>/<filename>

最后是关注tutorial video。它类似于第二个答案，图像也应该公开共享（还没有真正尝试过调整，尝试一下，如果它只共享选定的用户也可以工作），获取共享链接并使用 gdurl.com，它将共享链接转换为托管链接，该链接将成为图像的直接链接。

【讨论】：

【解决方案2】：

这是一个简单的例子：

问题：您通过共享 google 驱动器图像获得的图像 url 将是这样的

简单的解决方案：

(**a) https://drive.google.com/file/d/{this 部分将包含我们需要的图像 ID}/view?usp=sharing

但是要使用图片，我们需要这样的 url

(**b) https://drive.google.com/uc?id={this 部分将包含我们需要的图像 ID}

所以我们可以做的简单的事情是从 (**a) url 手动复制图像 ID 的那部分并粘贴到 (**b) url。

使用 JavaScript 自动化：

  let sharableLink = (**a); //paste the google drive image sharing link here
  let baseUrl = "https://drive.google.com/uc?id=";
  let imageId = sharableLink.substr(32, 33); //this will extract the image ID from the shared image link
  let url = baseUrl.concat(imageId); //this will put the extracted image id to end of base Url

这里的 32 和 33 是要从共享图片链接中提取的图片 ID 的开始和结束位置。

插件：

您可以创建一个简单的 HTML 来从共享链接中获取转换后的图像 Url。

HTML： sample.html

<!DOCTYPE html>
<html>
  <head>
    <body>
       </div>
      <!-- container for url and button to load it -->
      <div class="thumbnail-container">
        <input 
          type="text" 
          id="edt-thumbnail-url" 
          name="thumbnail-url"
          placeholder="Thumbnail Url">
        <div>
          <button class="btn btn-load-thumbnail" id="btn-load-thumbnail">Upload Thumbnail</button>
        </div>    
      </div> 
      <!-- script that runs the code for conversion -->
      <script src="/sample.js"></script>
    </body>
    <head>
</html>

现在创建一个 javascript 文件并粘贴它

sample.js

const productThumbnailUrl = document.getElementById("edt-thumbnail-url");
const btnUploadThumbnail = document.getElementById("btn-load-thumbnail");

btnUploadThumbnail.addEventListener("click", (e) => {
  e.preventDefault();
  let str = productThumbnailUrl.value;
  let baseUrl = "https://drive.google.com/uc?id=";
  let imageId = str.substr(32, 33);
  let url = baseUrl.concat(imageId);
  productThumbnailUrl.value = url; //this will put the converted url in the edit text box 
  console.log(url);
});

【讨论】：