图像库托管在谷歌驱动器文件夹

Image Gallery hosted in Google Drive Folder

本文关键字：谷歌 驱动器 文件夹 图像      更新时间：2023-09-26

我一直在寻找一种方法，在一个网站上创建一个画廊，从我的谷歌驱动器文件夹中的图像。我在这里分享了: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的研究:

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

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

Response result: 

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文件夹中获得image-id。这可以通过Google Drive本身的托管链接来托管，或者可以通过Google Apps Script创建，并在那里提供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>

关于授权，请查看他们的文档

相关文章：