图片库托管在 Google 驱动器文件夹中

Question

我一直在寻找一种方法来在网站上使用 google 驱动器文件夹中的图像创建图库。我在这里分享的内容：https://drive.google.com/drive/u/0/folders/0Bwx-OwnNeIvwRldSVlU5SGN0dGs 里面有一个简单的 HTML 和一个画廊文件夹，里面有怪物卡车和可爱动物的图片。目标是创建一个画廊，人们可以在其中上传井的图像；怪物卡车和可爱的动物。

我一直在寻找实现这一目标的各种方法，这是我目前所发现的：

简而言之，我想要实现的是在我的 G-Drive 中的公开共享文件夹中获取图像的 ID。然后使用这些 id 通过 JS 在 HTML.

中创建一个画廊

我的 HTML 现在的样子：

index.html

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">
<!-- all divs will append here -->
</div>

我在 Drive SDK 上研究的内容：

我一直在使用这里的 "try it" 部分来弄清楚我需要做什么。 https://developers.google.com/drive/v2/reference/children/list#examples

请求结果：GET https://www.googleapis.com/drive/v2/files/0Bwx-OwnNeIvwRG5rNzZ6OURSNEk/children?fields=items%2Fid

响应结果：

200 OK
- SHOW HEADERS -
{
"items": [
{
 "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
},
{
 "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
},
{
 "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
},
{
 "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
},
{
 "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
},
{
 "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
}]}

我希望脚本执行的操作：

script.js

var imageIds = <!-- ids from the the response --> ;
var x = imageIds.length;
for (var i = 0; i < x; i++) {
 <!-- create a <div> --> 
}
//See below*

创建一个 div: 在 for 循环中它会创建一个 <div> 和一个特定的 "class" 和一个 <img> 在那个 div 里面，有一个 "src="http://drive.google.com/uc?export=view&id=IMAGE-ID"，其中 "IMAGE-ID" 是从 "Response" 得到的。然后 <div> 将附加到 index.html 中的 <div id="gallery">。

最后我想要的 HTML 看起来像：

index.html:

<h1>Cute Animals & <br> 
Monster Vehicles</h1>

<div id="gallery">

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwaFZXVzVmMl9ILUU">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwVk1DTEpnR0J6VHc">
   </div>

   <div class="brick">
      <img src="http://drive.google.com/uc?export=view&id=0Bwx-OwnNeIvwblBHLVEza0hxY2s">
   </div>

 <!-- and so on ... -->

</div>

我现在不确定的是，需要如何对其进行身份验证才能从 G-Drive 文件夹中获取图像 ID。这可以从 Google Drive 本身及其托管链接托管，或者可以通过 Google Apps 脚本创建，并在那里提供 HTML 的功能，这将使身份验证更容易因为您可以直接从驱动器中获取所有内容。

我不明白为什么找不到这个不涉及付款的地方。如果每个人都有机会从 G-Drive 文件夹中的图像创建图像库，那就太好了。

非常希望得到您的帮助。非常感谢。

Answer 1

首先，关于代码本身，应该是这样的：

document.addEventListener('DOMContentLoaded', function() {
  var response = {
    "items": [{
      "id": "0Bwx-OwnNeIvwaFZXVzVmMl9ILUU"
    }, {
      "id": "0Bwx-OwnNeIvwVk1DTEpnR0J6VHc"
    }, {
      "id": "0Bwx-OwnNeIvwblBHLVEza0hxY2s"
    }, {
      "id": "0Bwx-OwnNeIvwTkZZVXp0dDg4bXc"
    }, {
      "id": "0Bwx-OwnNeIvwZTN1YzZrcm53eFE"
    }, {
      "id": "0Bwx-OwnNeIvwYkZ5ZXpjWHhKcFk"
    }]
  };

  var imageIds = response.items.map(function(item) {
    return '<div class="brick"><img src="http://drive.google.com/uc?export=view&id=' + item.id + '"></div>';
  });

  document.getElementById('gallery').insertAdjacentHTML('afterbegin', imageIds.join(''));
});

<div id="gallery"></div>

关于授权，take a look at their documentation。

图片库托管在 Google 驱动器文件夹中

Image Gallery hosted in Google Drive Folder

html

javascript

google-apps-script

google-drive-api