reactjs - 找不到图片

Question

我无法将自定义图像放入 React Native。

因为，这是我在 Native 上构建的第一个应用程序，所以我很确定我的概念有问题。

首先我在一个组件中导入我的图像

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

然后我在内部使用 If 条件FlatList将其附加到变量

<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>

                            )}}

在上面的代码中，它显示了我从网络上获取的图像

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

但不是我的自定义组件中的那个

 this.image =  tImage

[问题：]我可能做错了什么？我很确定我正在正确导入图像，因为我的路径中只有一张照片，如果路径不正确，则会引发错误

[更新：]在控制台中它正在记录类似这样的内容

找不到图片

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

[注意：]即使我删除它也会记录If condition

添加我的相关目录结构 -> 我正在从 CoinCapCharts.js 导入 imgt

标签： reactjsreact-native

Answer 1

问题是您对本地加载的图像使用 uri。

请使用类似的东西：

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