警告：失败的道具类型：提供给'图像'的道具“源”无效

Question

我试图动态呈现图像。但我得到这个错误。什么是动态获取图像源和渲染的解决方案？

MainComponent.js

const iconsNames =[ 
{image:"require('../pngIcons/the-statue-of-liberty.png')"}, 
] 

iconsNames.map(function(item, index){ 
    return (
     <CardDetails key={index} data={ item } /> 
     ) 
.bind(this)) 

CardDetails.js

return(
<Image style={{width: 130, height: 140}} source= {this.props.data.image} /> 
) 

我尝试过其他方法太多，但未能赢得成功。

未知命名模块

MainComponent.js

const iconsNames =[ 
    {image:'../pngIcons/the-statue-of-liberty.png'} 
    ] 

CardDetails.js

var Img = require(''+this.props.data.image); 
    return (
    <Image style={{width: 130, height: 140}} source= {Img} /> 
    ) 

Answer 1

：我在使用这种方法得到这个错误我不认为你需要在require('...')左右引用，只需要：

const iconsNames = [ 
    {image: require('../pngIcons/the-statue-of-liberty.png')}, 
]