невозможно получить массив файлов SVG из общей папки в компонент в React JS

Question

здесь у меня есть около 20 файлов SVG в папке с изображениями

public 
  |-images
        -| 20 svg files 

как только я могу получить только 1 изображение, которое, если установить папку images src

 import React from 'react';

import svg from "../src/images/image1.svg"
class App extends React.Component{

   render(){
     return(
       <div>
         <img src={svg} alt="info"></img>
       </div>
     )
   }
}

export default App;

вот как я могу получить массив изображений из общей папки, которые можно использовать в компоненте

обновление:

скажем, моя структура папок похожа на

public
      |- images
           |-50 images
   src
    |- component1
    |- component 2
           |- component2.js 


  if i am calling in component2.js


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

тогда я получаю модуль ошибки не найден

Answer 1

Я думаю, вы можете пойти по этому пути:

import React from 'react';

var images = [];

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

export default App;