4

I'm trying to build a react app and I have to use multiple images ,now do i have to import every images i'll use like:

import image from '/img/img1.png';

<img src={img} />

or is there another way to it???,

PS: I've tried "require" and it gave an error also :

<img src={windows.location.origin +'/img/img1.png'}/>

gives no output

KLMurphy
  • 41
  • 1
  • 4
  • 1
    It depends on your build setup. You can also just use a relative link to the asset directly assuming it's located in a static location. "src='/img/img1.png'", or import it as base64 (but that depends on the build tool as well). – Tim Nov 20 '20 at 01:52
  • 1
    https://stackoverflow.com/questions/39999367/how-do-i-reference-a-local-image-in-react This should help – Zen Monkey Nov 20 '20 at 01:55

2 Answers2

4
  • Since you are using webpack, have a look at require.context . You should be able to import all png files in '/img' to images variable. Then you can use image by images["img(n).png"].
function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('/img', false, '/\.jpg/'));

<img src={images["img1.png"]} />
  • In another way, you can use a file dedicated to these imports :

images.js :

import img1 from "/img/img1.jpg"
import img2 from "/img/img2.jpg"
import img3 from "/img/img3.jpg"
.
.
.
import img(n) from "/img/img(n).jpg"

export default [
    img1,
    img2,
    ...
];

Then import this array in one line in other files :

import imgs from './images';

P.S. please refer my accepted answer on similar question.

koko-js478
  • 1,173
  • 5
  • 16
2

If you're using ES6+, you can use iteral. Something like below.

const imageNames = ['img1.jpg', 'img2.jpg', 'img3.jpg']

render() {
  ...
  imageNames.map(image => <img src={`/img/${image}`}></img>)
  ...
}
baymax
  • 3,836
  • 2
  • 10
  • 30