How to display every image inside an image folder in react

Question

I have an image folder in my create-react-app project with a bunch of images. I want to display every single image in the components.

├── Components
│   ├── Icons
│   │   ├── Icon.jsx (I want to display every single icon)
│  
│  
├── Images
│   ├── Icons
│   │   ├── ... (over 100 SVG icons)

In my .jsx file, I want to loop over every image/icon and display it.

Icons.jsx

import React, { Component } from 'react';
import Icons from '../../Images/Icons';


class Icons extends Component {
  render() {
    return (
      //Loop over every icon and display it
    );
  }
}

Are the images named in a particular order or have a pattern associated with them? — Satej S, May 28 '19 at 18:25
@SatejS yeah they have a specific pattern to them. They have naming conventions such as "outline", "sizes", etc — Richard Bustos, May 28 '19 at 19:19
Assuming there are some very strict naming conventions and formats such as "outline-250","outline-300", "sizes-200", your rendering loop could render with increments in the value of the digit. — Satej S, May 28 '19 at 19:28
Possible Duplicate of = > https://stackoverflow.com/questions/53762640/how-to-import-all-images-from-a-folder-in-reactjs — Afsanefda, May 29 '19 at 04:53

Phani · Accepted Answer · 2019-05-29T05:45:08.307

I had the same scenario where I have to pick images or SVGs from the folder and display it. Below is the process I followed :

Folder structure

  -public
   -src
     |-component
     |-images
        |-1.png
        |-2.png
        |-3.png
        .
        .
        |-some x number.png

In component where ever you want to consume the image there, you have to do this:

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
var listOfImages =[];

class App extends React.Component{
    importAll(r) {
        return r.keys().map(r);
    }
    componentWillMount() {
        listOfImages = this.importAll(require.context('./images/', false, /\.(png|jpe?g|svg)$/));
    }
    render(){
        return(
          <div>
              {
                    listOfImages.map(
                      (image, index) =>    <img key={index} src={image} alt="info"></img>
                    )
              }
          </div>
        )
    }
}

It worked for me; Give it a try.

if my answer is full fills your requirement please mark it as answer — Phani, May 29 '19 at 05:21

score 1 · Answer 2 · answered May 28 '19 at 18:51

I'd take a look at https://github.com/react-icons/react-icons/blob/master/packages/react-icons/scripts/build.js. The author takes many folders of svg's and turns them into usable components in react. It's a repeatable workflow that should work for your svg icon pack as well if you retrofit that script into your app.

In some ways for webpack, you'd need something like an index.js file in that '../../Images/Icons' folder that exports all the icons for easy import elsewhere.

You can do some quick and dirty bash tricks (like lsa) and with your editor (multi-cursor/find-and-replace) to get the filenames and make that index.js file once. Then adding to it will not take much effort. But it's probably better to use a script that can generate an "exports file" on demand from a folder of svgs.

Mataroni · Answer 3 · 2021-08-12T17:36:39.017

You've probably seen this one if you've looked around

export default function getImagePaths(directory) {
  let images = [];
  directory.keys().map((item, index) => images.push(item.replace("./", "")));
  return images;
}

This function returns an array of paths to each photo in the desired directory. Using this I created an index.js file in a folder called gallery

const directory = require.context("../", false, /\.(png|jpe?g|svg)$/);
let imagePaths = getImagePaths(directory);

let images = [];
imagePaths.map((path) => images.push(require("../" + path)));

export default images

This index file uses the string array returned from getImagePaths and creates its own array with imagePaths.map((path) => images.push(require("../"+path))); This array is then exported from index.js and used in the page.

Here is a snippet of it in use.

import images from "../assets/images/gallery";
import "../assets/css/gallery.css";

const Gallery = () => {
  return (
    <div id="gallery-container">
      {images.map((img, index) => (
        <div>
          <img key={index} src={img} alt={img} />
        </div>
      ))}
    </div>
  );
};

How to display every image inside an image folder in react

3 Answers3

Linked