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

时间:2017-02-24 05:10:17

标签: reactjs react-native

我尝试动态渲染图像。但是我收到了这个错误。动态获取图像源并呈现它的解决方案是什么?

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

1 个答案:

答案 0 :(得分:3)

我认为你不需要require('...')左右的引号,只需这样做:

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