Как отобразить каждое изображение в папке изображений в реакции

Question

В моем проекте create-react-app есть папка с изображениями.Я хочу отобразить каждое изображение в компонентах.

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

В моем файле .jsx я хочу перебрать каждое изображение / значок и отобразить его.

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

Answer 1

У меня был тот же сценарий, где я должен выбрать images или SVG s из папки и отобразить его. Ниже приведен процесс, которому я следовал:

Структура папок

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

В component там, где вы хотите потреблять image, вы должны сделать это:

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

Это сработало для меня; Попробуйте.

Answer 2

Я бы посмотрел на https://github.com/react-icons/react-icons/blob/master/packages/react-icons/scripts/build.js. Автор берет много папок svg и превращает их в полезные компоненты в ответ.Это повторяемый рабочий процесс, который должен работать и для вашего пакета иконок SVG, если вы модифицируете этот скрипт в свое приложение.

В некоторых случаях для веб-пакета вам понадобится что-то вроде index.js файла в этом * 1006.* папка, которая экспортирует все значки для легкого импорта в другое место.

Вы можете сделать несколько быстрых и грязных трюков с bash (например, lsa) и с помощью вашего редактора (multi-cursor / find-and-replace) получитьимена файлов и сделайте этот файл index.js один раз.Тогда добавление к нему не займет много усилий.Но, вероятно, лучше использовать скрипт, который может генерировать «файл экспорта» по запросу из папки svgs.