React-360 图片 URI 不可见

Question

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 存储、Amazon S3 和 Azure Blob 存储。在使它们 public 之后，它们都完美地呈现给非 react-360 浏览器 img 元素，但是 none 它们在 react-360 浏览器 canvas 中工作。

但是“https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940”是 URL 我发现它确实有效，但将同一张图片上传到存储空间不起作用。

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

如何让我在 Google 云存储中的 JPEG 图像呈现为 react-360 中的图像元素？谢谢，请 :)

Answer 1

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

不允许 CORS：

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

是否允许 CORS：

Answer 2

对于 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>

React-360 图片 URI 不可见

React-360 Image URI not Visible

google-cloud-storage

react-360