Load images using webpack and react

Question

I cant figure out how to get images to load using webpack and React. I have tried many options and it always says that the hashed name of the file cant be found. I am using file-loader right now.

webpack.config

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

tried as css background

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

Also tried in my index.js file

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

render(){
return(

 <img src={img} />

)}

This is the error i always get GET http://127.0.0.1:8000/1588566d908ab07815178f219404856d.png 404 not found.

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