警告：失敗的道具類型：提供給'圖像'的道具「源」無效

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