React-360: Use external Image as Scene Background - web

Question

i have been trying for some time to set an external image over the environment.
This is my index.js:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
asset,
View,
VrButton,
} from 'react-360';
import {Environment} from 'react-360';
// Set the background to a 360 or 180 image
Environment.setBackgroundImage(
{uri: 'https://devcdn.player360.de/dev/media-768-raw.jpg'}
// asset('media-768-raw.jpg')
);
export default class Hello360 extends React.Component {
// Our component will keep track of this state
state = {
};
componentDidMount(){
}
render() {
return (
<View style={styles.panel}>
<Text>
<Text>Hey</Text>
</Text>
</View>
);
}
};
const styles = StyleSheet.create({
panel: {
// Fill the entire surface
width: 1000,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.4)',
justifyContent: 'center',
alignItems: 'center',
}
});
AppRegistry.registerComponent('Hello360', () => Hello360);
React seems to try to load the image but it simply cancled for some reason.
Developer Tools: Network Screenshot
Also the console output gives no indication of a CORS or any other exception:
Console Output Screenshot
The background of my scene is still black. What would be the correct way to include dynamically external images in react-360?

Answer 1

It was still the right way to load external images.
The problem was, that a filter was active in my console output. Therefore I was not able to see the CORS warning in the console.
It was still a CORS problem on the devcdn.player360.de server. We fixed the CORS headers and are now able to load external images.