警告：失敗した小道具の種類：無効な小道具 'source'が 'Image'に提供されました

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

私はあまりにも他の方法を試してみましたが、succedことができませんでした。

不明という名前のモジュール

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')}, 
]