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:



Xcode Images.xcassets

Remote Image

  <Image
    style={styles.base}
    source={{uri: 'http://i.stack.imgur.com/DfkfD.png'}}
  />

      

+5


source


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







All Articles