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 c

Answer 1

You can't use a single import statement, but you can do this:

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

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

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

Source.

Answer 2

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 3

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 4

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! ;)

Answer 5

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.