macOS 上的 Safari 不显示我的图像，但 chrome 和 safari mobile 可以答案

【问题标题】：Safari on macOS is not showing my images but chrome and safari mobile doesmacOS 上的 Safari 不显示我的图像，但 chrome 和 safari mobile 可以
【发布时间】：2020-09-11 02:24:50
【问题描述】：

在我的 Vuejs (2.6.11) 应用程序中，我以这种方式显示来自 Google Cloud Storage 的图像（v-for 的结果）：

<img slot="image" class="card-img-top" :src="img_basepath + result.header_img" alt="Card image cap" >

虽然在 iOS 上的 Chrome 和 Safari 中一切正常，但图像在 Safari 13.1 上被破坏并显示带有问号的蓝色方块：

如果我使用 Safari 的检查工具检查 HTML，它会显示以下内容：

<div class="card-image">
<img src="https://storage.cloud.google.com/heavnt-test/artistes/May2020/xoGD1P848Id9dmSrLJWX.png" alt="Card image cap" class="card-img-top">
</div>

如果检查加载的资源，我得到了这个：

当然，该链接可以正常工作 (check it here)，并且它本身可以在 Safari 中正常加载。

因为它是唯一一个不能正常工作的浏览器，所以我不知道去哪里解决这个问题。

编辑 24/05/20 @ 14:14

如果我使用 firebase Auth 登录我的应用程序，则会加载图像.. 不要帮助我知道出了什么问题，但如果它可以帮助任何人告诉我...

【问题讨论】：

标签： html image vue.js safari

【解决方案1】：

发现是因为我使用了如下形式的桶：

https://storage.cloud.google.com/<bucket name>/<file name>

这需要使用 google 帐户登录，所以它在 chrome 上工作，因为我在没有 Safari 时登录。

要正确访问我需要使用的 Cloud Storage 公共文件：

https://storage.googleapis.com/<bucket name>/<file name>

【讨论】：

感谢您发布解决方案！我遇到了完全相同的问题，您为我节省了很多时间。 GCP 文档 eyeroll.