CODEWITHSUNDEEP
javascriptreactjsimageimportrequire
Duong Phan
Duong Phan

Reputation: 341

How to import multi images in ReactJS

I have something like this.

[1]: https://i.sstatic.net/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.

Upvotes: 0

Views: 144

Answers (1)

Jirachai Uraijaree
Jirachai Uraijaree

Reputation: 186

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]})`

Upvotes: 1

Related Questions