如何在反应中加载图像（找不到错误模块）？

Question

我正在尝试使用map函数显示多张图片，但出现此错误

找不到模块'../../ assets / images / logo-full.png'

在渲染方法中可以正常工作的代码

{[require('../../assets/images/logo-full.png')].map((i)=><img key={i} src={i}></img>)}

在渲染方法中不起作用并出现错误的代码以及为什么??

{['../../assets/images/logo-full.png'].map((i)=><img key={i} src={require(i)}></img>)}

为什么需要在数组元素中而不是在src中？

Answer 1

您不能传递要求的变量。它需要在编译时就知道需要工作。在文档中对此进行了解释。 https://facebook.github.io/react-native/docs/images

Answer 2

如前所述，图像位于数组中，您需要通过在数组上运行地图来渲染图像。因此，图像的路径也必须存在于数组中。

constructor(props){
    super(props);
    this.state={
        imageArr:[{'id':1,source:'pathofimage1'},{'id':2,source:'pathofimage2'}]
    }
}


render(){
    return (
        <div>
            {this.state.imageArr.map((item,index)=>{
                 return (
                     <div key={index}>
                     <img src={item.source} alt="image" />
                     </div>
                 )
            })
        </div>
    )
}