时间戳

首页 > 解决方案 > 将映射变量放入图像的源中

javascript - 将映射变量放入图像的源中

问题描述

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

这是我在下面尝试的，但它带来了这个错误calls torequire 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>
        );

标签： javascriptreactjsreact-nativeecma

解决方案

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

为了使其工作，必须静态知道 require 中的图像名称。

更多信息在这里

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`}} />

推荐阅读