先说结论：2025年1月26日，到现在只有静态抓取成功，继续努力。
一直有想自己从头架个网站放自己的电绘作品（想当初也是推动我跨领域念资管所的一大原因），最近终于觉得好像有成功的可能性，故尝试之。结果试了好几天都没办法。
先在这记下过程以免重蹈覆辙，并希望和我一样想从零串接前后端内容的人没成功也别伤心，这里有个人和你一起哭（喂底下是花式失败过程，欢迎指教qwqqq
之前补修大学部的课，和组员以firebase为后端建了一个场地预约系统；修硕士班的课则因为用了bigquery而接触到了google console，发现「咦，有google drive api欸」——脑海浮现了一个念头：我想做个展示作品集的网站，如果作品放在google drive里某个资料夹，并运用神奇的方法让网站读取放进资料夹的图片，这样不是达成目标了吗！
最初版本：手动上传
为了增加信心，我先尝试了以下html，让手动上传的图片可以以正方形型态显示（说到这个，IG的排版似乎变成长方形，果然只要不是自己的网站就要承受环境变化的风险…）。测试是否可运作的方法是vscode里的live server，不出所料，成功。
//最原始、上传图片的版本
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传展示</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
#upload-btn {
margin-bottom: 20px;
}
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.image-item {
position: relative;
width: 100%;
padding-top: 100%; /* 1:1 ratio */
overflow: hidden;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #fff;
}
.image-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<h1>图片上传展示</h1>
<input id="upload-btn" type="file" accept="image/*" multiple>
<div id="gallery"></div>
<script>
const uploadBtn = document.getElementById(\'upload-btn\');
const gallery = document.getElementById(\'gallery\');
uploadBtn.addEventListener(\'change\', (event) => {
const files = event.target.files;
Array.from(files).forEach(file => {
const reader = new FileReader();
reader.onload = function(e) {
const imgUrl = e.target.result;
const imageItem = document.createElement(\'div\');
imageItem.classList.add(\'image-item\');
imageItem.innerHTML = `<img src="${imgUrl}" alt="Uploaded Image">`;
gallery.appendChild(imageItem);
};
reader.readAsDataURL(file);
});
});
</script>
</body>
</html>
鬼打墙：Google Drive API来了
接下来进到了实在不想重新面对的时刻。F12的console里的一堆错误讯息，实在头很痛，这步我狂丢ChatGPT逼他解释。这里贴几个给大家瞅瞅
错误 400：invalid_request
要求详情： flowName=GeneralOAuthFlow
这通常是 OAuth 2.0 验证或授权请求出问题了。我一开始有在google console开project，并设定了 OAuth 2.0 的ID，也开了api key，但后来发现如果资料夹（以及里面的档案）设成公开，前者可以不用。
Unchecked runtime.lastError: The message port closed before a response was received.
据说这是个常见的错误讯息，特别是当开发Chrome扩充功能或使用浏览器api时会遇到。奇怪的是，这里我是使用有学校后缀的google帐号开启api，用一般的google帐号开启测试页面、用学校后缀的测试就不会了。后来发现，这个错误好像不会影响应用程式的主要功能，后来就先放着不管。
Requests from referer http://localhost are blocked
这里我把测试页面的网址（就是我的localhost和port号）新增在api key设定允许的HTTP引用网址（HTTP referrer）里。
[Report Only] Refused to load the script \'https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.IdpIFrameHttp.zh_TW.ERoUSIbVwj8.es5.O/am=BgM/d=1/rs=AOaEmlEePYgwwGOjUmaOblkA-zkOD6LYAA/m=base\' because it violates the following Content Security Policy directive: "script-src \'unsafe-inline\' \'unsafe-eval\' blob: data:". Note that \'script-src-elem\' was not explicitly set, so \'script-src\' is used as a fallback.
上面似乎是说因为内嵌script违反了Content Security Policy (CSP) settings，这里我试着把html和js拆开，但还是失败，还提到说不能用iframe云云（当初有个错误讯息的解方是用iframe或img标籤的Google Drive url，这该死又甜美的矛盾）。
试了好几天，总算显示出图的名称，但图片本图就是错误方块、而且会很快闪现一个正方形的轮廓又消失。
变着法子盘问了ChatGPT，发现似乎跟 CORS（Cross-Origin Resource Sharing，跨来源资源共享）问题有关。图片url可能会受到CORS限制，尤其是在从本地或不同域名的网站加载图片时。所以尽管我可以直接在浏览器中打开图片，但用html载入图片时，这些限制可能会导致无法显示。
试着在html加了CORS标头解决问题，但GPT说「如果只是单纯从前端加载 Google Drive 的图片，这通常很难绕过 CORS 限制」，我不知道有没有道理，反正最后图还是载入失败。
最后的程式码是这样的.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Drive Dynamic Image Gallery</title>
<style>
#image-gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
img {
width: 150px;
height: 150px;
object-fit: cover;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Dynamic Image Gallery</h1>
<div id="image-gallery"></div>
<img src="https://drive.google.com/uc?id=作品" alt="Test Image">
<iframe src="https://drive.google.com/file/d/作品/view?usp=sharing" width="500" height="500"></iframe>
<script>
// 您的 Google Drive 资料夹 ID
const folderId = "QAQ"; // 替换为您的资料夹 ID
const apiKey = "QAQQ"; // 替换为您的 API Key
const gallery = document.getElementById("image-gallery");
async function fetchImagesFromDrive() {
try {
const response = await fetch(
`https://www.googleapis.com/drive/v3/files?q=\'${folderId}\'+in+parents+and+mimeType+contains+\'image/\'&key=${apiKey}&fields=files(id,name,mimeType)`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (!data.files || data.files.length === 0) {
console.error("No image files found in the folder.");
return;
}
data.files.forEach(file => {
const imgUrl = `https://drive.google.com/uc?id=${file.id}`;
const img = document.createElement("img");
img.src = imgUrl;
img.alt = file.name;
// 处理载入失败
img.onerror = () => {
img.alt = "图片载入失败";
console.error(`Failed to load image: ${imgUrl}`);
};
const link = document.createElement("a");
link.href = `https://drive.google.com/file/d/${file.id}/view?usp=sharing`;
link.target = "_blank";
link.appendChild(img);
setTimeout(() => {
gallery.appendChild(link);
}, 500); // 延迟 500 毫秒
gallery.appendChild(link);
});
} catch (error) {
console.error("Error fetching images:", error);
}
}
// 呼叫函式
fetchImagesFromDrive();
</script>
</body>
</html>
.js
// 初始化 Google API 客户端
function initClient() {
gapi.load(\'client\', () => {
gapi.client.init({
apiKey: \'QAQ\', // 替换为你的 API 金钥
}).then(() => {
console.log("Google API client initialized.");
listFiles();
}).catch((error) => {
console.error("Error initializing Google API client:", error);
});
});
}
function listFilesInFolder() {
const folderId = \'QAQQ\'; // 替换为你的资料夹 ID
const folder = DriveApp.getFolderById(folderId);
const files = folder.getFiles();
while (files.hasNext()) {
const file = files.next();
Logger.log(`Name: ${file.getName()}, MIME Type: ${file.getMimeType()}`);
}
}
// 列出指定资料夹中的档案
function listFiles() {
const folderId = \'QAQQ\'; // 替换为你的公开资料夹 ID
gapi.client.request({
path: `https://www.googleapis.com/drive/v3/files`,
method: \'GET\',
params: {
q: `\'${folderId}\' in parents and mimeType contains \'image/\'`,
fields: \'files(id, name, mimeType, webViewLink)\',
key: \'QAQ\', // 替换为你的 API 金钥
},
}).then((response) => {
const files = response.result.files;
const gallery = document.getElementById(\'image-gallery\');
if (files && files.length > 0) {
files.forEach((file) => {
const img = document.createElement(\'img\');
img.src = `https://drive.google.com/uc?id=${file.id}`;
img.alt = file.name;
img.style.width = "150px";
img.style.height = "150px";
img.style.objectFit = "cover";
const link = document.createElement(\'a\');
link.href = file.webViewLink;
link.target = "_blank";
link.appendChild(img);
gallery.appendChild(link);
});
} else {
gallery.innerHTML = \'<p>No images found or permission denied.</p>\';
}
}).catch((error) => {
console.error("Error listing files: ", error);
});
}
// 启动 Google API 客户端
gapi.load(\'client\', initClient);
之后初步研没办法从google drive api讨到便宜，决定先从读取本机的图片做起，这个除了因为路径最前端多了一个「\\」让我抓狂了快半小时，倒是成功了。但想做到不输入每张图片的路径、让脚本自己抓取图片，似乎还有很长一段路要走。
宫崎骏桑说过「越重要的事情就越麻烦」，现在只能先这样安慰自己了（抱头