Блог

Итак, я хотел бы использовать изображение в своем проекте React, но когда я открываю браузер для просмотра своего веб-сайта, я всегда получаю 404:

 import React from "react";
import ReactDOM from "react-dom";
import img from "./App/assets/image.png";

ReactDOM.render(
  <img src={img} alt="img"></img>,
  document.getElementById("root")
);
  

это мой webpack.config.js файл:

 var path = require('path');

module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output:{
      path: path.join(__dirname, '/dist/'),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /.(png|jpg|gif)$/i,
            use: [
               'file-loader'
            //   {
            //     loader: 'file-loader',
            //    //  options:{
            //    //     name: '[name].[ext]',
            //    //     outputPath: 'assets',
            //    //  }
            //   },
            ],
          },
         {
            test: /.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            loader: "babel-loader",
            options: { presets: ["@babel/env"] }
          },
      ]
   },
   devServer: {
      historyApiFallback: true,
      contentBase: path.join(__dirname, "public/"),
      port: 3000,
      publicPath: "http://localhost:3000/dist/",
      hotOnly: true
    },
};
  

файл .babelrc:

 {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
    ]
}
  

После этого оно успешно компилируется, но консоль браузера показывает:

 GET http://localhost:3000/da8ab57a5dacdcc560a4f73bd6e235a8.png 404 (Not Found)