如何将Google Drive图像嵌入网页


How to embed Google Drive images into a webpage?

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

我已经弄清楚了php循环,我只是缺少<img src="" >的路径。

目前,即使只是从谷歌硬盘静态获取一张图片也只是一个开始。

如果我理解你的目标,那么它几乎是托管来自Google Drive的图像。环顾社区,发现了一些我认为是你想要的东西,或者至少可以帮助你了解如何做到这一点。

首先,是从这个答案。您只需要使用以下URL格式:

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

--提供文件ID。不过有一个注意事项,注意:此链接似乎受配额限制。因此,对于公共/大规模共享来说并不理想。但这证明了您可以从文件驱动器中检索文件(在您的情况下,是图像)。

第二,是上面同一篇文章的最高答案。简单地说,只要你把文件放在公共文件夹中,然后使用以下URL检索它,这是非常可能的:

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

最后,是跟随教程视频。这类似于第二个答案,即图像也应该公开共享(还没有真正尝试过调整,尝试一下,如果它只共享选定的用户,它也可以工作),获得共享链接并使用gdurl.com,gdurl..com会将共享链接变成托管链接,托管链接将成为图像的直接链接。

这里有一个简单的例子:

问题:你从共享谷歌硬盘图像中获得的图像url将类似于

简单解决方案:

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

但要使用图像,我们需要类似的url

(**b)https://drive.google.com/uc?id={此部分将包含我们需要的图像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);
});