Загружайте изображения с помощью веб-пакета и реагируйте

Question

Я не могу понять, как получить изображения для загрузки с помощью веб-пакета и React. Я перепробовал много вариантов, и он всегда говорит, что хешированное имя файла не найдено. Я сейчас использую загрузчик файлов.

webpack.config

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      }

пробовал в качестве фона CSS

#box {
  height: 300px;
  width: 300px;
  margin: 20px;
  padding: 20px;
  border: solid black;
  background: url("./images/grape.png");
}

Также пробовал в моем файле index.js

import img from "./images/grape.png";
...
...

render(){
return(

 <img src={img} />

)}

Это ошибка, которую я всегда получаю GET http://127.0.0.1:8000/1588566d908ab07815178f219404856d.png 404 не найдено.

Answer 1

Я думаю, у вас должно быть ключевое слово i после теста.Как то так

        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: ["babel-loader", "eslint-loader"]
        },
        {
            test: /\.(jpe?g|png|gif)$/i,
            loader: "file-loader"
        },
        {
            test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
            loader: "file-loader"
        }