React Native: Unable to load image
I am writing a simple iOS program to show an image using React Native.
'use strict';
var React = require('react-native');
var {
Image
} = React;
var styles = React.StyleSheet.create({
base: {
height: 400,
width: 400
}
});
class SimpleApp extends React.Component {
render() {
return (
<Image
style={styles.base}
source={require('image!k')}
//source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}}
/>
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
But I got a message from the iPad screen:
"Failed to print error:","'undefined' is not an object (evaluating 'stackString.split')"
When I change the code to use image url
//source={require('image!k')}
source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}}
I only get a red rectangular border.
When I use another js file everything works well. "Hello World" can be displayed on the iPad screen.
'use strict';
var React = require('react-native');
var {
Text,
} = React;
class SimpleApp extends React.Component {
render() {
return (
<Text>Hello World</Text>
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
+3
source to share
2 answers
Make sure you are using the latest version of React Native. As of React Native 0.4.4 the following works:
Local Image
<Image
style={styles.base}
source={require('image!tabnav_settings')}
/>
Also make sure you add the image you want to use in your images:
Remote Image
<Image
style={styles.base}
source={{uri: 'http://i.stack.imgur.com/DfkfD.png'}}
/>
+5
source to share
As @potench pointed out in the comments, loading static images with the .jpg extension is currently not working. But if you just rename your jpg to png everything will be fine. See also https://github.com/facebook/react-native/issues/521
+2
source to share