0

I have something like this.

[1]: https://i.stack.imgur.com/lp1TM.png

I want to import multi images with shorter code.

I tried to use a template string like this enter image description here

But it seems to require not to show my image.

Duong Phan
  • 301
  • 5
  • 12
  • 1
    If your file is in public directory. You can access your image by using normal string. Try this, `style={{ backgroundImage : 'url(../../assets/images/forest/Layer_0002.png)'}} ` – hellikiam Dec 17 '20 at 04:21
  • No my file is in src – Duong Phan Dec 17 '20 at 05:54
  • 1
    The reason why the template string is not working: [react's require() only uses static url not variables](https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string?rq=1) – sdym Dec 17 '20 at 08:21

1 Answers1

1

You can use an index file to re-export all the images in folder

assets/images/forest/index.js

import layer0001 from './Layer_0001.png';
import layer0002 from './Layer_0002.png';
import layer0003 from './Layer_0003.png';

export { layer0001, layer0002, layer0003 };

and importing them as named import

import { layer0001, layer0002, layer0003 } from 'assets/images/forest';

or import everything

import * as forest from 'assets/images/forest';

which allow you to do a dynamic URL like

let layer = 'layer001';

backgroundImage: `url(${forest[layer]})`
Jirachai Uraijaree
  • 156
  • 5