Ошибка: не удается разрешить "./images/sample.png" React Webpack

Question

Я пытался создать приложение MERN с помощью Webpack, и не могу загрузить изображения в React.

Метод рендеринга компонента React:

const logo = require('./images/sample.png');

<img src={logo}'/>

Webpack

module: {
loaders: [
  { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
  { test: /\.css$/, use: ['style-loader','css-loader']},
  {test: /\.(jpg|png|svg)$/, loader: 'url-loader'}
]  }

выводит bundle.js в папку src, структура файла ниже

Структура файла

app

| ...... src

......... | компоненты

.................... | компонент.js

......... | images

.................... | sample.png

Не имеет значения, как я изменяю путь в require, и даже если я помещаю изображение sample.png в ту же папку, что и component.js, я получаю сообщение об ошибке, которое не может быть устранено.Я думаю, что это должно быть ошибка веб-пакета, но независимо от того, сколько учебников и форумов я прочитал, я не могу это исправить.

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

ОБНОВЛЕНИЕ:

Я изменил src={logo} на src={require("${logo}")} и больше не получаю ошибку на стороне сервера.Вместо этого я получаю сообщение об ошибке в консоли разработчика (с использованием Chrome), которое, похоже, возвращает URI img (реагирует на проблему?):

Uncaught Ошибка: не удается найти данные модуля: image / png; base64 ...

Answer 1

В вашем web.config.js вам нужно

const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

и добавьте его сюда

 module: {
    rules: [
      ...
      imageLoaderConfiguration,
      ...
    ],
  },