React-360 图像 URI 不可见答案

【问题标题】：React-360 Image URI not VisibleReact-360 图像 URI 不可见
【发布时间】：2018-08-23 01:22:13
【问题描述】：

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 存储。在将它们公开后，它们都完美地呈现给非 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 结果代码，我所能做的就是设置背景颜色来查看图像元素，实际图像永远不可见。

如何让 Google Cloud Storage 中的 JPEG 图像渲染到 react-360 中的图像元素？谢谢，请:)

【问题讨论】：

不知道我对你的理解是否正确，你能再解释一下吗？也许this是你想要的
我只是将图像文件公开在 Cloud Storage 上，但我喜欢您的链接显示如何获取不可猜测的 URL。我能够让 Google 返回 allow-access-control-origin 标头，一切都很好。我认为浏览器缓存让我有些困惑，或者它会更快更有意义。感谢您的额外提示。

标签： google-cloud-storage react-360

【解决方案1】：

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

不允许 CORS：

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

允许 CORS：

【讨论】：

【解决方案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>

【讨论】：