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

Question

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

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

虽然在 Chrome 和 iOS 上的 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>

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

当然，link 正在运行 (check it here)，并且在 Safari 中加载正常。

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

编辑 24/05/20 @ 14:14

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

Answer 1

发现是因为我用了一个桶，形式如下：

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

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

要正确访问我的云存储 public 个文件，我需要使用：

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

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

Safari on macOS is not showing my images but chrome and safari mobile does

html

safari

image

vue.js