CODEWITHSUNDEEP
react-native
Shashank
Shashank

Reputation: 447

Not able to render image in React Native

I'm trying to load a JPG image from my local folder in my react-native application.

The image is stored inside assets folder which I''m trying to render inside Image tag

Here's my JSON object

  {
    title: 'Device 2',
    image: '../assets/imgs/device_default.jpg',
    cta: 'View device',
    mac: '1234-xxxx-xxxx-5678'
  },

Here's my code for the same

<Block flex style={imgContainer}>
   <Image source={{uri: item.image}} style={imageStyles} />
</Block>

here item contains the props value. I can iterate other values like title and mac

but not able to render the image.

Can anyone help me on this??

Upvotes: 0

Views: 73

Answers (2)

Shashank
Shashank

Reputation: 447

JSON

    title: 'Device 2',
    src : require('../assets/imgs/device_default.jpg'),
    cta: 'View device',
    mac: '1234-xxxx-xxxx-5678'
  },

HTML

<Block flex style={imgContainer}>
   <Image source={item.src} style={imageStyles} />
</Block>

Got the exact solution here

Upvotes: 1

Aurangzaib Rana
Aurangzaib Rana

Reputation: 4252

dynamic paths in require are not currently supported.The only allowed way to refer to an image in the bundle is to literally write require('name-of-the-asset') in the source.

you need to add require for image in your json.Check below example 

  const Profiles=[
      {
      "id" : "1",
      "name" : "Peter Parker",
      "src" : require('../images/user1.png'),
      "age":"70",
    },
    {
    "id" : "2",
    "name" : "Barack Obama",
    "src" : require('../images/user2.png'),
    "age":"19",
    },
    {
    "id" : "3",
    "name" : "Hilary Clinton",
    "src" : require('../images/user3.png'),
    "age":"50",
    }
]
export default Profiles;

Upvotes: 0

Related Questions