webpack - not able to resolve image src path

Question

This is my project directory:

src
 -components
   -Header
     -index.jsx
webpack
 -webpack.base.js
 -webpack.dev.js

In my App.jsx ,

return (
  <img src="@/assets/images/components/header/logo-header.png" alt="logo" class="header__icon"/>
)

After I run npm start , the image is not shown.

From Inspector

package.json

  "scripts": {
    "start": "webpack-dev-server --config ./webpack/webpack.dev.js"
  },

utils.js

const path = require('path')

module.exports = {
  resolve: function(dir) {
    return path.join(__dirname, '..', dir)
  }
}

webpack.base.js

const webpack = require("webpack");

const utils = require('./utils')

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  resolve: {
    alias: {
      '@': utils.resolve('src'),
    },
    extensions: ["*", ".js", ".jsx"]
  },
  module: {
    rules: [...],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html"
    })
  ],
};

webpack.dev.js

const { merge } = require("webpack-merge");
const base = require("./webpack.base");

const Dotenv = require("dotenv-webpack");

module.exports = merge(base, {
  mode: "development",
  devtool: "inline-source-map",
  output: {
    path: '/',
  },
  devServer: {
    port: 3000,
    static: true
  }
});

I tried to add file-loader in webpack but still not working.

      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },

Answer 1

You can use Asset Management#Loading Images . You can adjust the file path according to your file directory structure.

Eg

Directory structure:

⚡  tree -L 4 -I 'node_modules'
.
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   └── images
│   │       └── logo.png
│   ├── index.html
│   └── index.jsx
└── webpack.config.js

3 directories, 6 files

src/index.jsx :

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <img src={require("@/assets/images/logo.png")} alt="logo" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

webpack.config.js :

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.jsx",
  output: {
    path: path.resolve(__dirname, "./dist"),
  },
  mode: "development",
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    extensions: ["*", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./src/index.html"),
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 9000,
  },
};

package.json :

{
  "name": "70107481",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.3",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Start the webpack dev server via npm start . Result: