使用 JavaScript 以 HTML 形式显示 Google 云端硬盘中的图像时遇到问题

问题描述 投票：0回答：4

我正在努力使用 JavaScript 在我的 HTML 页面上显示来自 Google 云端硬盘的图像。遵循在线指南并没有完全解决我的问题。

HTML（index.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);

背景：

  • Google 云端硬盘中的图像设置为“知道链接的任何人都可以查看。”
  • 尽管如此，图像仍无法在浏览器中加载，并且控制台显示错误。

附加HTML（纯html）：

<body>
  <img src="https://drive.google.com/uc?id=1BEW9tkgVKlp_ebUc17LkXDH-mnPc4ome" alt="Your Image Alt Text">
</body>

CodePen 示例

如有任何帮助，我们将不胜感激！谢谢。

javascript html image
4个回答
2
投票

虽然没有在任何地方发布（我发现），但 Google Drive 的服务器已开始拒绝附加这两个标头的请求：

sec-fetch-mode: no-cors
sec-fetch-site: cross-site

如果您将浏览器直接导航到文件的（直接链接）URL（即获取您的

src
URL并将其粘贴到浏览器导航栏中），但该请求期间的
sec-fetch-mode
标头将是设置为 
navigate
并且效果很好。

但是，与您的 

<img>
示例一样，如果请求源是网页，并且与 
drive.google.com
来源不同，就会出现问题。 （您的浏览器将自动将这些 
sec-fetch-mode
和 
sec-fetch-site
标头设置为请求的一部分。）

这似乎是 Google Drive 自 2024 年 1 月 10 日开始的一项未记录的更改，我仍然找不到任何提及它的地方，因此尚不清楚此行为是否会持续存在，或者是否反映了意外更改或疏忽。

1
投票

我也有同样的问题。临时解决办法是使用大宽度的驱动器文件缩略图

1
投票

您正在此处执行所有操作，看来问题出在 Google 端，并于今天开始发生（撰写本文时为 2024 年 1 月 11 日）。 Google 可能会解决此问题并允许直接图像嵌入，或者他们可能会继续阻止它，这意味着您必须找到另一种方式来托管网站图像，例如 S3。

（可能）此处跟踪错误：https://issuetracker.google.com/issues/319531488?pli=1

0
投票

我开始在 HTML 中链接 css 文件时遇到同样的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.