CODEWITHSUNDEEP
javascriptiosjsonlistviewreact-native
comp_sci5050
comp_sci5050

Reputation: 145

Adding Images stored in JSON Array in a ListView - ReactNative

I'm having trouble displaying images stored in a JSON array in a ReactNative ListView. Let's say this is my data:

var data = [
  {
    id: 0,
    photo: '../images/test.png',
  },
  {
    id: 1,
    photo: '../images/test.png',
  },
  {
    id: 2,
    photo: '../images/test.png',
  },
]

Then, in my class, first I require the data (assume it's being exported correctly): 

var data = require("../data").data

Then for each element in the datasource, I loop through the JSON array, and try to display the Image:

<Image source={{uri:item.photo}} style={styles.photo}></Image>

However, nothing displays on screen. I know the data is being pulled through correctly because other text fields (not shown above) display properly, for example:

<Text style = {styles.name}>{item.id}</Text>

This displays properly. Also if I try to require the image directly in the source, i.e. 

<Image source={require('../images/test.png')} style={styles.photo}></Image>

It works fine. Does anyone know why the Image source isn't pulling when referenced as a variable?

Upvotes: 3

Views: 1696

Answers (1)

Ivan Carmosino
Ivan Carmosino

Reputation: 21

You can do that in this way:

var data = [
  {
    id: 0,
    photo: require('../images/test.png'),
  },
  {
    id: 1,
    photo: require('../images/test.png'),
  },
  {
    id: 2,
    photo: require('../images/test.png'),
  },
]

Upvotes: 2

Related Questions