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.

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

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/56347783/how-to-display-every-image-inside-an-image-folder-in-react

标签

javascript

reactjs

loops

jsx