javascript - 如何从本地文件夹加载图像？

Question

我正在使用 swiper显示卡片，其中每张卡片都是一个包含图像和一些数据的对象:

let myCards = [
    {
        name: "1", 
        image: './store/images/1.png'},
    {
        name: "2", 
        image: './store/images/2.png'},
    // ..
]

// ..

<Swiper 
    cards= {myCards}
    renderCard={(card) => {
        return (
            <View>
                <Text> {card.name} </Text>
                <Image source={card.image}/> // problem here. Set source from local
            </View>
        )
    }}
</Swiper>

我的图片是 .png 并且在应用程序目录中的一个文件夹中:MyProject/app/store/images

上面弹出一个错误说提供给图像的无效 Prop “来源”

如果我遵循 Image-Facebook Code并执行此操作:source={require(card.image)}，它会出错:传递给 require 的任何内容都应为字符串文字

我怎样才能做到这一点？

Answer 1

您可以要求将图像放入数组中:

let myCards = [
    {
        name: "1", 
        image: require('./store/images/1.png')},
    {
        name: "2", 
        image: require('./store/images/2.png')},
    // ..
]

那么，您的代码应该可以正常工作:

<Swiper 
    cards= {myCards}
    renderCard={(card) => {
        return (
            <View>
                <Text> {card.name} </Text>
                <Image source={card.image}/> // problem here. Set source from local
            </View>
        )
    }}
</Swiper>

react-native 不允许您动态要求图像 AFAIK。