Importing multiple files in react

Question

I am using create-react-app for my react project. It has got webpack configured for importing images. I wish to import multiple images (say 10) from a images folder into a component. The easiest way of doing this would be to add multiple import statement such as -

import Img0 from '../images/0.png';
import Img1 from '../images/1.png';
import Img2 from '../images/2.png';
import Img3 from '../images/3.png';
import Img4 from '../images/4.png';
import Img5 from '../images/5.png';
import Img6 from '../images/6.png';
...

The above code would not be a good choice when we have multiple files to import. Is there a way to add the import statements in a loop? I tried adding for loop but I was unable to modify the variables Img0, Img1 etc. (using ES6 `` didn't work as it converted the variable to a string)

Answer 1

I think maybe a better idea is to use an index file for your images folder.

Supposing you have this structure:

And you need to import all of your images to your HomePage component. You can easily create an index.js file on your images folder, exporting all the images using require, like this:

export const Background = require('./bg/background.jpg');
export const First = require('./photos/first.jpg');
export const Second = require('./photos/second.jpg');
export const LinkedIn = require('./social/linkedin.png');

Then on your component you can import all of them with a single import.

import {
  Background,
  First,
  Second,
  LinkedIn
} from '../../assets/images'

And this would be your final folder structure:

Hope it helps! ;)

Updated on 25/04/2021:

If you want to use ES6 named imports:

images/index.js:

import Background from './bg/background.jpg';
import First from './photos/first.jpg';
import Second from './photos/second.jpg';
import LinkedIn from './social/linkedin.png';

export {
  Background,
  First,
  Second,
  LinkedIn
};

Answer 2

You can't use a single import statement, because the whole point of import and export that dependencies can be determined statically, i.e. without executing code, but you can do this:

function importAll(r) {
    let images = {};
    r.keys().map(item => { images[item.replace('./', '')] = r(item); });
    return images;
}

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

<img src={images['0.png']} />

Source.

Answer 3

I'm not sure it's really a good way but i was also looking for how to import several images to Components. however, I wanted to import images like a module

image folder

• a.png
• b.png
• c.png
• index.js

index.js

import a from "./a.png";
import b from "./b.png";
import c from "./c.png";
const images = {
    a,
    b,
    c
}
export default images;

Component which images imported

import images from './images'; //Your images folder location

Usage in the render()

render(){
    return(
         <img src={images.a} />
    )
}

Answer 4

You can import all images from a folder by this function

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

that images is a object of Module. you can access a file path by images[index].default

Answer 5

Just create img folder with all images in public folder and then you can do

src="/img/logo_main.png"

https://www.youtube.com/watch?v=taMJct5oeoI

Answer 6

Create an images folder inside the public folder which can be seen outside the src folder.

To call the images in a component, do this:

src="images/imageName.format"

Do not use src='../public'. It will show an error.

React will find the folders you have mentioned automatically

Answer 7

A some kind of mixed approach to the above answers, which is maybe more clear, at least for me is:

1. inside the folder (e.g. in /src/components/app/assets/png/icons) with many many images we create a file: "index.js" with content like:

    export const file1 = require("./IconRed_100x100.png");
    export const file2 = require("./IconSilver_100x100.png");
    export const file3 = require("./IconWhite_100x100.png");
    export const file4 = require("./IconBrown1_100x100.png");
    export const file5 = require("./IconBrown2_100x100.png");
    export const file6 = require("./IconGray_100x100.png");
    export const file7 = require("./IconMetallic_100x100.png");
    export const file8 = require("./IconMetallic_100x100.png");
    export const file9 = require("./IconMetallic_100x100.png");
    export const file10 = require("./IconMetallic_100x100.png");
    ...
   

(we can create this file outside of our app via a python script else it would make no sense to use this approach at all, as we can then implement multiple import-lines inside of the react-component where we need the images; sure we need to know WHAT and HOW many files we want to import)

2. inside the component where we need these images (here it´s called ImageGallery inside /src/components/app/imageGallery/):

    import * as ALL from "../assets/png/icons";
   
    const itemsToRender = [];
    for (let x in ALL) {
     console.log(x);
     itemsToRender.push(
       <div key={x} className="image-gallery-item">
        <img src={ALL[x]}></img>
       </div>
     );
    }
   
    function ImageGallery() {
    return (
      <>
       <div className="image-gallery">{itemsToRender}</div>
      </>
     );
    }
   
    export default ImageGallery;
   

Then we rendered all the images from "/src/components/app/assets/png/icons" inside our React-component called ImageGallery.