React Native load image dynamically

Question

Is there any way to load an image this way?

var x = './img/a.jpg';
<Image source={require(x)}/>

I need to use this because I want to load the image dynamically.

Are you using any package manager such as Webpack ? (This is a yes if you are using create-react-app) — 3Dos
– 3Dos, Commented Dec 13, 2017 at 13:06

Orgil · Accepted Answer · 2017-12-13 19:10:13Z

1

Simply you can create object and use it as follows

const images = {
  foo: require('./img1.png'),
  bar: require('./img2.png'),
}

<Image source={images.foo} />

answered Dec 13, 2017 at 19:10

Orgil

7118 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

i want to use a loop for load all the image from folder dont wanna do code for every image

@MudassirZakaria You can iterate through object keys,for (var key in images) { <Image source={images[key]} />; }