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

Question

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

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

总之我试图做到的，是让图片的ID在一个公开分享我的G-Drive中的文件夹。然后使用这些id在HTML中通过JS创建一个画廊。

我的HTML是什么样子现在：

的index.html

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

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

我研究了驱动器的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

创建一个div：在for循环中，将创建一个与特定"class"和<img>该专区内<div>，具有"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的功能进行创建，这将使认证更容易，因为您可以直接从驱动器获取所有内容。

我不明白为什么这不是在哪里被发现，不涉及付款。如果每个人都有机会从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。