我第一次使用Webpack开发一个普通的Javascript项目。
这在"生产"和"开发"模式下都能成功编译，但它显示的不是图像，而是损坏的图像图标。
以下是项目文件夹结构：

这是webpack.config.js文件：

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

module.exports = {
  entry: {
    main: "./src/js/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Life Quality App",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpe?g|gif)$/i,
        type: "asset/resource",
        use: {
          loader: "img-optimize-loader",
          options: {
            compress: {
              mode: "lossless",
            },
          },
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        use: {
          loader: "url-loader",
          options: {
            name: "fonts/[name].[ext]",
          },
        },
      },
      {
        test: /\.js$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  devServer: {
    static: path.resolve(__dirname, "dist"),
    open: true,
  },
};

下面是我导入图像的javascript文件示例：
rendSearchUI.js

import greenCityImg from "../assets/images/test.jpg";

const renderSearchUI = () => {
  const body = document.body;
  const appContainer = document.createElement("div");
  const appTitle = document.createElement("h1");
  const img = document.createElement("img");
  img.src = greenCityImg;
  appContainer.classList.add("app-container");
  appTitle.classList.add("app-title");
  appTitle.textContent = "LIFE QUALITY APP";
  appContainer.append(appTitle, img);
  body.appendChild(appContainer);
};

export default renderSearchUI;

index.js

import "../styles/main.css";
import renderSearchUI from "./renderSearchUI.js";

window.addEventListener("DOMContentLoaded", () => {
  renderSearchUI();
});

如果我运行console. log（img. src），它会显示一个不正确的路径："本地主机：8080/c744d32a4afed775625c.jpg"
我该怎么补救呢？
太感谢你了!