Question

我在堆栈中进行了搜索，似乎没有人根据我想要实现的问题提出这个问题。我正在通过数组进行映射，因此我想使用映射变量的名称作为图像的来源，即我将其与.jpg

连接起来

这是我在下面尝试的方法，但是它带来了此错误calls to require expect exactly 1 string literal argument, but this was found: require（'./'+ herb.name +'.jpg'）.，可能是什么？我做错了

 const herbs = this.state.record.map((herb) =>
 <View key={herb.id} style={BackStyles.herb_box}>
 <Image style={BackStyles.image} source={require('./'+herb.name+'.jpg')}/>
 <View style={{flexDirection: 'column',}}><Text style={BackStyles.header}>{herb.name}</Text> <Text style={BackStyles.sub}>{herb.bot}</Text></View>
            </View>
        );

Answer 1

这是行不通的，因为需要预先静态地知道图像，因此解析器可以从哪里知道资产的加载位置。

要使其正常工作，必须静态知道require中的图像名称。

更多信息here

var imageMap = {
    "herb1":  require('path.to.img.jpg'),
    "herb2":  require('path.to.img.jpg'),
};
<Image style={BackStyles.image} source={imageMap[herb.name]}/>

您可以尝试的其他选项是 uri 属性的
您可以使用 uri 属性在项目的资源文件夹中定义动态图像。

<Image source={{uri: `${herb.name}.jpg`}} />

将映射变量放在图像的源中

1 个答案: