Not able to render image in React Native

Question

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??

Shashank · Accepted Answer · 2019-12-11 12:22:42Z

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

Aurangzaib Rana · Accepted Answer · 2019-12-11 11:52:44Z

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;

i guess this is correct, what Tim has provided is not a workable solution i guess.
How should I render the src in HTML?? Using <Image source={{uri: item.image}} style={imageStyles} />

Collectives™ on Stack Overflow

Not able to render image in React Native

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related