反应-360 图像 URI 不可见



react-360 指令看起来非常清晰和简单:

<Image source={{uri: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"}} style={{height:100,width:100}} />

但是我已经手动将图像文件上传到Google Storage,Amazon S3和Azure Blob Storage。公开后,它们都完美地渲染到非 react-360 浏览器 img 元素,但它们都没有在 react-360 浏览器画布中工作。

但是"https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"是我发现的确实有效的URL,但是将相同的图片上传到存储不起作用。

即使我在遇到问题时获得成功的 200 或部分内容 206 结果代码,我所能做的就是设置背景颜色,实际图像永远不会可见。

如何让我的 JPEG 图像在 Google 云存储中渲染到 react-360 中的图像元素?谢谢,请:)

https://cloud.google.com/storage/docs/cross-origin

不允许 CORS:

  • https://storage.cloud.google.com/[BUCKET_NAME]

允许 CORS:

  • https://storage.googleapis.com/[BUCKET_NAME]
  • https://[BUCKET_NAME].storage.googleapis.com

对于 S3,您可能希望在正在使用的存储桶上使用 CORS 设置,并为要从中访问存储桶的站点添加例外。请在此处查看文档:

https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

假设您的存储桶正在被 myreact360app.herokuapp.com 访问,您可以将以下内容添加到存储桶 CORS 策略中。

<CORSRule>
<AllowedOrigin>https://myreact360app.herokuapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>