在我的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>
如果检查加载的资源,我得到了:
当然,链接有效(请在此处检查),并且本身可以在Safari中正常加载。
由于它是唯一无法正常工作的浏览器,因此我不知道在哪里可以解决此问题。
编辑24/05/20 @ 14:14
如果我使用Firebase Auth登录我的应用程序,则图像会加载..不要帮助我知道出了什么问题,但是如果它可以帮助任何人告诉我...
找出原因是因为我使用了以下形式的存储桶:
https://storage.cloud.google.com/<bucket name>/<file name>
要求使用Google帐户登录,因此它在chrome上正常工作,因为我未在Safari上登录。
要正确访问我的Cloud Storage公共文件,我需要使用:
https://storage.googleapis.com/<bucket name>/<file name>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句