0

The react-360 instructions seem very clear and simple:

<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}} />

But I've manually uploaded image files to Google Storage, Amazon S3, and Azure Blob Storage. After making them public they all render to a non-react-360 browser img element perfectly, but none of them work in the react-360 browser canvas.

But "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" is a URL I've found that does work, but uploading that same picture to storage doesn't work.

Even when I get a successful 200 or a partial content 206 result code while experiencing my issue, all I can do to see the image element is to set the background color, the actual image is never visible.

How do I get my JPEG images in Google Cloud Storage to render to Image elements in react-360? Thanks and please :)

mattferrin
  • 607
  • 2
  • 8
  • 19
  • 1
    I don't know if I understood you correctly, could you explain a little more? Maybe [this](https://cloud.google.com/appengine/docs/standard/php/googlestorage/images) is what you want – Iñigo Aug 24 '18 at 15:22
  • I was simply making the image file public on Cloud Storage, but I like that your link shows how to obtain a non-guessable URL. I was able to get Google to return the allow-access-control-origin header and all was good. I think browser caching confused me slightly, or it would have made more sense more quickly. Thanks for the additional tip. – mattferrin Aug 25 '18 at 00:08

2 Answers2

2

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

Don't allow CORS:

Do allow CORS:

mattferrin
  • 607
  • 2
  • 8
  • 19
0

For S3 you might want to play with the CORS setting on the bucket you are using and add an exception for site you are hitting the bucket from. Take a look at the doc here:

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

Say your bucket is being accessed by myreact360app.herokuapp.com you could add the following to the buckets CORS policy.

<CORSRule>
    <AllowedOrigin>https://myreact360app.herokuapp.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
Kevin Moroney
  • 31
  • 7