Flatlist不会显示来自json的图像（React Native）

Question

i've been having this issue with my images not showing in my application.

Im using FlatList:

Here is my javascript file holding the json which im importing into the View:

I've been trying so many ways to get the Image component to accepts the images but its just not showing, many of the ways i've been trying doesn't show as an error, the images is just not showing at all.

Hope someone can help me out of this dilemma, been stuck for days and googling as a mad man -.-

Answer 1

You have 2 problems in your code:

1. you need to use require instead of { uri: '' } for local images
2. when you use require you can't pass a variable as path, so you need to pass just literal string.

So replace each path line in your colors array to include require

example:

{
  id: 1,
  path: require('../../assets/character-customs/albert/colors/c1.png'),
}

Also update Image component line with this

<Image style={styles.images} source={item.path} />

This should work for you

Answer 2

For me flatlist was wrapping all data inside item so this fixed the problem for me

 <Image source={{uri:item.path}}/>

if this doesnt work try to log item from from renderitem method