The file could not be accessed BUG.

[ipr0310]

Hi, first of all
When i'm trying to load the image with this component, in a AWS S3 Bucket, it shows me the following error:

This is the link of the image: to show that it works nicely
https://otekdo-asset-store.s3.amazonaws.com/dealers/quiri-assets/360/a1-80.jpg

The console says this:

But i'm pretty sure that i had setup CORS in my S3 Bucket
This is my CORS SETUP in my S3 bucket

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

But the problem that it's more weird, it that react-pannelum works perfectly with Mozilla Firefox, and the same image URL.

Firefox

Chrome

Opera

React Pannelum compatibility with different browsers:

NEWS
After clearing the cache again, the (Image with React Panellum )now does not get rendered in any browsers

*Firefox: Do not Work
*Opera: Do not Work
*Opera gaming edition: Do not Work
*Google Chrome: Do not Work
*Microsoft Edge (With chromiun engine): Do not Work

*I already cleaned cache a couple of times
*I already tried to setup CORS multiple times, but it still does not work
*Firefox works even not beign on incognito mode, the other browsers has the problem

Amazing component by the way!

[tforsbacka]

Hi,
Are you sure that the issue isrelated to the component?
Have you tried to load the image in a html img tag?

[ipr0310]

Hi, yeah!
(Sorry for the late response)
Of course it works, that's why i also provided the url Link in the post

This is the link of the image: to show that it works nicely
https://otekdo-asset-store.s3.amazonaws.com/dealers/quiri-assets/360/a1-80.jpg

[tforsbacka]

Hi,
Just to be clear here. You can render the image with the component outside you production environment? You can render the image in an img tag in your production environment?
How can this issue be reproduced?

[ipr0310]

NEWS
After clearing the cache again, the (Image with React Panellum )now does not get rendered in any browsers

The Component does not render in production environment and also does not render on development environment.
I'm gonna show you this example

This is google Chrome

This is Mozilla Firefox

This is google chrome in the production mode

This is Firefox in the production mode

And that bug still persists in the other browsers as i explained before.

[tforsbacka]

Hi,
I’m not able to reproduce the issue. Your image is rendering fine for me with the component in my dev env.

[ipr0310]

Wow, it is so weird, well i'm gonna clean the cache again with ccleaner.

Which version you are using of reat panellum?

Well, after cleaning the cache, the img got rendered ¡wonderfully!

But after opening the browser again (a few times more, just to make sure everything is ok), it shows the same error, i think there must be a caching error.

[tforsbacka]

Hi,
I'm using the latest version of the component. I find it very unlikely that you issue is related to this component. It's however easy to find out. On your react page. Render your image in this component and in an img tag. Will it be rendered in your img tag but not in the component?

[ipr0310]

Well, now akwardly it works well without any error (When i always clean the cache), but i think i'll wait for this component to get some updates (In case of some problems comes along the way)
@tforsbacka , A lot of thanks for also testing and asking,
And @hoaiduyit , amazing component btw!

[hoaiduyit]

Hi @isaacp0310 ,
No problem, just report error if you find any
Thank for using my component.

[ipr0310]

Wow!, @butterfly-coder congratulations,
but which solution did you use exactly?
i mean they're talking about solutions with lambda and other stuff
i would love to know what you have done exactly with react or other stuff

Because i was still trying impleting the query parameters randomly but, it still does not show

[ipr0310]

@butterfly-coder Wow, it works!
I set up properly the query pararameter only in the HTML code

While with javascript i fetch the image with another method

Example:

In the html it looks like this (In the react pannelum component , JSX)

<ReactPannellum
       id='1'
       sceneId='firstScene'
       imageSource="myImage.png?x-request=html"
       config={{
              autoRotate: -2,
              autoLoad: true,
        }}
            style={{
              flexGrow: 1,
              width: '100%',
              height: '77vh',
              background: '#000000',
         }}
      />

While with javascript i fetched the image prior rendering
let imageToFetch=new Image();
imageToFetch.src = 'myImage.png';

And i was testing it more than 20 times, and it works nicely!, it does not show that error anymore