Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'

Question

I try to render image dynamically. But I am getting this error. What is the solution for getting image source dynamically and rendering that ?

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

I tried other methods too but could not succed. I get this error while using this method:

Unknown named module

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

I don't think you need quotes around require('...'), just do:

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