Could not find image

Question

I am unable to put custom image in React Native.

Since, This is the first app I am building on Native, I am pretty much sure that I am doing something wrong with My concept.

First I am importing my Image in a component

 import tImage from './../images/imgt.png'

And then I am using If condition inside FlatList to attach it to a variable

<FlatList
                        data={this.props.tCryptoNews.slice(0,5)}
                        renderItem={({index, item}) => {
                            this.image = item["data"]["thumbnail"]
                            if (this.image == "none") {
                                this.image = tImage
                            }
                            return (
                            <View > 
                                 <Image 
                                     source={{uri: this.image }}
                                     style={img}
                                     /> 
                            <Text style={tList}>{item["data"]["title"]}</Text>
                            </View>

                            )}}

In the above code, It is displaying the image I am getting from web

this.image = item["data"]["thumbnail"]

but Not the one from my custom component

 this.image =  tImage

[Question:] What could i be doing wrong? I am pretty sure that I am importing image correctly since there is only one photo in my path and if the path would've been incorrect, it would have thrown error

[Update:] In the console it is logging something like this

Could not find image

file:///Users/xxxx/Library/Developer/CoreSimulator/Devices/56804007-072A-4169-9276-C68F99E1B7C2/data/Containers/Bundle/Application/CF5B4261-72B8-4E8D-BAC6-96B1842846BE/crypto.app/self.png

[Note:] It logs this even if I remove If condition

Adding my relevant directory Structure -> I am importing imgt from CoinCapCharts.js

Answer 1

The problem is that your using uri for an image loaded locally.

Please use something similar to this:

...
if (item["data"]["thumbnail"] == "none") {
  this.image = require('./../images/imgt.png');
} else {
  this.image = { uri: item["data"]["thumbnail"] };
}
...
<Image
  source={this.image}
  style={img}
/>
...