反应-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 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 中的图像元素？谢谢，请:)

Answer 1

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

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>