javascript - Google云端硬盘文件夹中托管的图片库

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

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

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

我的HTML现在看起来像什么：

index.html

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

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

我对Drive SDK进行了研究：

我一直在这里使用“尝试”部分来弄清楚我需要做什么。 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"，并且在该div中创建一个<img>，其中的"src="http://drive.google.com/uc?export=view&id=IMAGE-ID"从“响应”中获取“ IMAGE-ID”。 <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云端硬盘本身及其托管链接进行托管，也可以通过Google Apps脚本以及在其中提供HTML的功能创建，这样可以简化身份验证，因为您可以直接从Drive获取所有内容。

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

真的希望您对此有所帮助。非常感谢。

最佳答案

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

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。

关于javascript - Google云端硬盘文件夹中托管的图片库，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32969684/