Google 协作平台代码嵌入模块中的图像未显示在 iOS 设备上

问题描述

我在 Google 协作平台的嵌入式代码字段中使用了以下代码来在我的网站上显示图像，在我的 Windows、Linux 和 Android 设备上一切正常，但它们没有显示在 iPhone 上（无论是使用 Chrome 或 Safari）！

一些上下文/约束： 我正在从我的 Google Drive 中提取我的图片。它们是 ~80kb JPEG。 我正在使用 HTML 表单，因为我有其他元素（按钮、字段），我已从下面的代码摘录中删除了这些元素，以关注该问题。我需要保留这张表格。

您以前遇到过这个问题吗？

<form name="submit-to-google-sheet">
   <img id="img1" width=163 height=227>
</form>

<script>
    const img1 = document.getElementById('img1');
    img1.src = "https://docs.google.com/uc?export=view&id={imageGoogleDriveID}";
</script>

PS：我已经探索了 Base64 格式，它允许在 iOS 操作的设备上显示图像。如果我只是将图像源设置为 Base64 字符串，它就可以工作。但是我不能像 JPEG 一样方便地从 Drive 调用 Base64 文件。我正在处理 250 多个图像，因此我不能在代码中间使用 base64 字符串，因为它太大而无法使用。我尝试使用 this example 之后的 base64_encode 函数对图像进行编码，但没有设法显示任何内容。我已经钻了这么多，我实际上想知道这是否是正确的方法！

解决方法

我们刚刚找到了适用于 iOS 的修复程序：当第三方 cookie 和跨站点跟踪被阻止时，图像不会加载。 here 解释了要切换的设置。

Base64 不是解决方案，因为问题来自从我的 Google Drive 中提取图像，即与我的网站不同的域。