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

Question

我尝试动态渲染图像。但我得到了这个错误。动态获取图像源并进行渲染的解决方案是什么？

主要组成部分。js

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

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

卡片详情。js

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

我也尝试过其他方法，但没有成功。我在使用此方法时遇到此错误：

未知命名模块

主要组成部分。js

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

卡片详情。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')},
]