Raú*_*ate 11 html javascript image
我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google Drive 的图像。遵循在线指南并没有完全解决我的问题。
HTML（索引.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 Image</title>
</head>
<body>
<img id="imageElement" alt="A lovely image">
<script src="script.js"></script>
</body>
</html>
JavaScript（script.js）：
const fileId = '1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome';
const imageElement = document.getElementById('imageElement');
async function fetchGoogleDriveImage(fileId) {
try {
const response = await fetch(`https://drive.google.com/uc?id=${fileId}`);
const url = URL.createObjectURL(await response.blob());
imageElement.src = url;
} catch (error) {
console.error('Error fetching the image:', error);
}
}
fetchGoogleDriveImage(fileId);
语境：
附加 HTML（纯 html）：
<body>
<img src="https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome" alt="Your Image Alt Text">
</body>任何帮助表示赞赏！谢谢。
虽然没有在任何地方发布（我发现），但 Google Drive 的服务器已开始拒绝附加这两个标头的请求：
sec-fetch-mode: no-cors
sec-fetch-site: cross-site
如果您直接将浏览器导航到文件的（直接链接）URL（即获取您的srcURL 并将其粘贴到浏览器导航栏中），则sec-fetch-mode该请求期间的标头将被设置为navigate并且工作正常。
但是，就像您的示例一样<img>，如果请求的来源是网页，并且与 的来源不同drive.google.com，则会出现问题。（您的浏览器将自动将这些sec-fetch-mode和sec-fetch-site标头设置为请求的一部分。）
这似乎是 Google Drive 自 2024 年 1 月 10 日开始的一项未记录的更改，但我仍然找不到任何提及它的地方，因此尚不清楚此行为是否会持续存在，或者是否反映了意外更改或疏忽。
小智 7
我也有同样的问题。临时解决方案是使用宽度较大的驱动器文件缩略图。
<img src="https://drive.google.com/thumbnail?id=xxxxxxxx&sz=w1000">
临时解决方案是将 Google Drive URL 替换为其他格式，强制下载并显示图像。uc?id=这可以通过替换为thumbnail?id=并附加&sz=w1000在 URL 末尾来实现。该sz=w1000参数指定图像的宽度。您可以根据需要调整该值。最终的 URL 格式应如下所示：
https://drive.google.com/thumbnail?id=FILE_ID&sz=w1000.
eg:
<body>
<img src="https://drive.google.com/thumbnail?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome&sz=w1000" alt="Your Image Alt Text">
</body>
旧网址 - “https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome”
新网址 - “https://drive.google.com/thumbnail?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome&sz=w1000”
如果您批量拥有 URL，您还可以使用 VS Code 或任何其他具有正则表达式搜索功能的文本编辑器来搜索和替换 URL：例如：
搜索：
https:\/\/drive\.google\.com\/uc\?id=([^"]+)
代替：
https://drive.google.com/thumbnail?id=$1&sz=w1000
使用此正则表达式，您可以搜索并替换代码库中的所有 URL。
请注意，这是一个临时解决方案，谷歌将来可能会停止对缩略图的支持。