尝试从json文件加载位置时未显示React Native图像

Question

This is a json file that stores a title and a image location for every elements.

 [ {"key": "a", "title": "Bangladesh", "image": "require('./img/bangladesh.jpg')"}, {"key": "b", "title": "Sports", "image": "require('./img/sports.jpg')"}, {"key": "c", "title": "Politics", "image": "require('./img/politics.jpg')"}, {"key": "d", "title": "Entertainment", "image": "require('./img/entertainment.png')"}, {"key": "e", "title": "Economics", "image": "require('./img/economics.jpg')"}, {"key": "f", "title": "Technology", "image": "require('./img/technology.jpg')"}, {"key": "g", "title": "Others", "image": "require('./img/m.jpg')"}, ] 

And Now I want to show all image and title using a Flatlist. Title shows perfectly but image not shows.

 <FlatList horizontal= {true} data={newsCategory} renderItem={({item}) => ( <TouchableOpacity style={styles.option} > <Image style={styles.imgButton} source={item.image} /> <Text style={styles.buttonText}>{item.title}</Text> </TouchableOpacity> ) } /> 

I check that image location comes perfectly from json file but not shows the image. Don't understand why this occurs.

Answer 1

remove string from require.

change this

[
    {"key": "a", "title": "Bangladesh", "image": "require('./img/bangladesh.jpg')"},
    {"key": "b", "title": "Sports", "image": "require('./img/sports.jpg')"},
    {"key": "c", "title": "Politics", "image": "require('./img/politics.jpg')"},
    {"key": "d", "title": "Entertainment", "image": "require('./img/entertainment.png')"},
    {"key": "e", "title": "Economics", "image": "require('./img/economics.jpg')"},
    {"key": "f", "title": "Technology", "image": "require('./img/technology.jpg')"},
    {"key": "g", "title": "Others", "image": "require('./img/m.jpg')"},
]

to this

[
    {"key": "a", "title": "Bangladesh", "image": require('./img/bangladesh.jpg')},
    {"key": "b", "title": "Sports", "image": require('./img/sports.jpg')},
    {"key": "c", "title": "Politics", "image": require('./img/politics.jpg')},
    {"key": "d", "title": "Entertainment", "image": require('./img/entertainment.png')},
    {"key": "e", "title": "Economics", "image": require('./img/economics.jpg')},
    {"key": "f", "title": "Technology", "image": require('./img/technology.jpg')},
    {"key": "g", "title": "Others", "image": require('./img/m.jpg')},
]

Answer 2

Your image source is string. You should eval it.

<FlatList horizontal= {true}
  data={newsCategory}
    renderItem={({item}) => (
      <TouchableOpacity
        style={styles.option}
      >
      <Image
        style={styles.imgButton}
        source={eval(item.image)}
      />
      <Text style={styles.buttonText}>{item.title}</Text>
    </TouchableOpacity>
     )
   }
/>