Импортировать весь каталог изображений в массив - React

Question

Я новичок в реакции

Я создал свой реактивный проект, используя create-реагировать-приложение.

Мне нужна та же функциональность, что и import logo from './logo.png';, но для каталога.

что-то вроде import * as Images from './images/'; и изображения будут массивом.

Я нашел несколько решений для webpack, но они, очевидно, не работают, возможно ли это в моей ситуации?

для контекста, вот как я хочу использовать изображения. В настоящее время они жестко запрограммированы в this.state.images []

const style = {
      //overflowY: "scroll",
      height: 5000,
      width: "100%",
      backgroudImage: `url(${this.state.images[this.state.index]})`,
      backgroundPosition: "center",
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat"
    }; 

Заранее спасибо.

Answer 1

Вы можете попробовать это

Создать const для сохранения нужных вам изображений, например

export const Images =  [
  '/assets/images/1.png', 
  '/assets/images/2.png',  
  '/assets/images/3.png'
]; 

Затем в ваших компонентах импортируйте это const и визуализируйте как

import {Images} из './../../utils/Image'

<React.Fragment>
{
   Images.map((item, index) =>  {
      return <div 
                key={index} 
                style={{
                  //overflowY: "scroll",
                  height: 5000,
                  width: "100%",
                  backgroundImage: `url(${item})`,
                  backgroundPosition: "center",
                  backgroundSize: "cover",
                  backgroundRepeat: "no-repeat"}}>
            </div>
   })
}
</React.Fragment>

Если установить стиль в качестве className, а затем передать динамическое изображение c в контекст

<React.Fragment>
{
    Images.map((item, index) =>  {
       return <div 
                  key={index} 
                  className='image-container'
                  style={{backgroundImage: `url(${item})`}}>
              </div>
  })
}
</React.Fragment>

Если вы собираетесь обновить веб-пакет, пожалуйста, установите url-загрузчик и файл-загрузчик

npm install url-loader file-loader --save-dev

, затем обновите конфигурацию веб-пакета как

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},