CODEWITHSUNDEEP
iosreact-native
Han Pengbo
Han Pengbo

Reputation: 1436

React Native: can't load image

I write a simple iOS program to show image with 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 the message from 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 rect border.

When I use another js file, everything works well."Hello World" can show on 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);

Upvotes: 4

Views: 14465

Answers (2)

d-vine
d-vine

Reputation: 5547

As @potench pointed out in the comments, loading static images with a .jpg extension doesn't currently work. But if you just rename your jpg to png everything works fine. See also https://github.com/facebook/react-native/issues/521

Upvotes: 2

peter
peter

Reputation: 3237

Make sure you are using a recent version of React Native. With React Native 0.4.4 following works:

Local image

  <Image
    style={styles.base}
    source={require('image!tabnav_settings')}
  />

Also make sure you added the image you want to use to your image assets:

Xcode Images.xcassets

Remote Image

  <Image
    style={styles.base}
    source={{uri: 'https://i.sstatic.net/DfkfD.png'}}
  />

Upvotes: 5

Related Questions