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 ); } }
Advertisement
Answer
I had the same scenario where I have to pick images
or SVG
s 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.