Skip to content

How to display every image inside an image folder in react

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.


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

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



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

        |-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)$/));
                      (image, index) =>    <img key={index} src={image} alt="info"></img>

It worked for me; Give it a try.