I have been trying to load local image files in ListView.

It does work when I hard code:

return <Image source={require('./public/image1.png')} style={{width: 60, height: 60}}/>

However, it doesn't work when I read the path of the image like this:

var path = rowData.thumbnail;
console.log(path); // './public/image1.png'
return <Image source={require(path)} style={{width: 60, height: 60}}/>

or like this:

return <Image source={require(rowData.thumbnail)} style={{width: 60, height: 60}}/>

with this error message,

Requiring unknown module"'./public/image1.png'". If you are sure the module is there, try restarting the packager or running "npm install".

Could you please give me an advice to read the path from the object? I attached the full code below. Thank you in advance.

class MyClass extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    let data = importedData.map(function(d) {
      return {
        thumbnail: "'./public" + d.thumbnail + "'"
      }
    });
    this.state = {
      dataSource: ds.cloneWithRows(data)
    };
  }
  renderRow(rowData) {
    var path = rowData.thumbnail;
    return <View style={{flex: 1, flexDirection: 'row'}}>
      <Image source={require(path)} style={{width: 60, height: 60}}/>
    </View>
  }
  render() {
    return (
      <View style={{paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

I have been trying to load local image files in ListView.

It does work when I hard code:

return <Image source={require('./public/image1.png')} style={{width: 60, height: 60}}/>

However, it doesn't work when I read the path of the image like this:

var path = rowData.thumbnail;
console.log(path); // './public/image1.png'
return <Image source={require(path)} style={{width: 60, height: 60}}/>

or like this:

return <Image source={require(rowData.thumbnail)} style={{width: 60, height: 60}}/>

with this error message,

Requiring unknown module"'./public/image1.png'". If you are sure the module is there, try restarting the packager or running "npm install".

Could you please give me an advice to read the path from the object? I attached the full code below. Thank you in advance.

class MyClass extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    let data = importedData.map(function(d) {
      return {
        thumbnail: "'./public" + d.thumbnail + "'"
      }
    });
    this.state = {
      dataSource: ds.cloneWithRows(data)
    };
  }
  renderRow(rowData) {
    var path = rowData.thumbnail;
    return <View style={{flex: 1, flexDirection: 'row'}}>
      <Image source={require(path)} style={{width: 60, height: 60}}/>
    </View>
  }
  render() {
    return (
      <View style={{paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

• javascript
• reactjs
• react-native
• reactive-programming

• Check if the module source has an export directive inside. Did you try to load the module on nodejs shell? – Mario Santini Commented Aug 23, 2016 at 7:01
• How many images are these. As you have put these images in local, so i suppose these are not many. Can you give me a count of the total images you wanted to load like this then i will purpose a solution for this. Thanks – Ahmad Gulzar Commented yesterday

1 Answer 1

According to the React-Native Docs there are a couple of ways to specify where your images e from:

Local Storage:

<Image source={require('./img/favicon.png')}/>

Network:

<Image source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>

Dynamic strings e.g. rowData.thumbnail can only be used for packaged images. See this issue.

If your images are loaded into images.xcassets on iOS and res/drawable on Android you can reference them by the filename like so:

<Image source={{uri:'thumbnailFileName'}}/>

or..

<Image source={{uri:rowData.thumbnail}}/>

You can also specify placeholders in the same way..

<Image source={{uri:rowData.thumbnail}} defaultSource={{uri:'placeholder'}}/>

Working demo - https://rnplay/apps/tsiGfQ