CODEWITHSUNDEEP
androidreact-nativereact-native-image
Irvan
Irvan

Reputation: 175

React Native Image uri doesn't work

I tried to display an image from a local file, so I try to do this

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}}
    style={{height:150,width:150}}
/>

my container component seems getting the height and the width but the image doesn't load. So I try this

<Image 
    source={require('../../assets/img_src/BTI.jpg')}
    style={{height:150,width:150}}
/>

It works really well, unfortunately as far as I know I can't use this implementation if i want to manipulate the address file first and store it to a variable. Example:

const imgSrc = `../../assets/${data.image}`;

where the data.image = 'img_src/BTI.jpg'. I try to delete all the data on my android simulator in the android studio but the result is still the same. Am I doing something wrong? Is there a better implementation for this?

Thanks a lot :)

Upvotes: 1

Views: 7233

Answers (1)

cortexlock
cortexlock

Reputation: 1476

Not being able to require() a dynamic path is an intended behaviour of React Native, the packager needs to know paths in advance - see React Native issues

We had this problem in our project, we were storing image URLs on our DB and wanted to concat strings in the app to get the path to the locally stored image. As you've discovered, this doesn't work. You might find our workaround useful.

In our /images folder, we created a new images.js file which simply exported an object whose keys mapped to all our local image paths like so

  export const Images = {
    image1: require('./image1.png'),
    image2: require('./image2.png'),
    image3: require('./image3.png'),
  };

Now the packager knew all the paths in advance and was happy. Then we added an imageKey to the DB item and used this rather than the absolute path. To grab an image we simply did

import { Images } from '../images/images';
// get your image key e.g. passed down through props
const img = Images[imageKey];

...
render() {
    ...
    <Image source={img} />
    ...
}

Might not fit your exact use case, but hopefully you might be able to make some use of it.

Upvotes: 13

Related Questions