React native require() 从 JSON 数据传递本地映像。第 9 行的调用无效：要求("./../assets/data/item/" + 图像)

Question

我基本上想做的是调用一个本地映像，该映像的路径存储在json中。

我的儿子：

"gallery": [
{
"id": 1,
"image": "dog1.jpg"
},
{
"id": 2,
"image": "dog2.jpg"
}
]

我的组件：

const Thumbnail = (props) => {
const image = props.image
return (
<View>
<Image source={require(`../assets/data/item/${image}`)} style={styles.image} />
</View>
)
}

该代码引发以下错误

TransformError componentsThumbnail.js: componentsThumbnail.js:Invalid call at line 9: require("../assets/data/item/" + image)

我试着像这个一样硬编码图像值

const Thumbnail = (props) => {
const image = "dog1.jpg"
return (
<View>
<Image source={require(`../assets/data/item/${image}`)} style={styles.image} />
</View>
)
}

它是有效的。但是我希望json中的值是动态的。

Answer 1

这不是好的做法，您可以执行以下

"gallery": [
{
"id": 1,
"image": require(`../assets/data/item/dog1.jpg`) // this way
},
....
]
const Thumbnail = (props) => {
.....
<Image source={image} style={styles.image} />
....
}

你可以在这里找到详细信息