React+Webpack自定义项目图片无法渲染问题求助

我未使用create-react-app命令，从零搭建了React项目，Webpack配置如下：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
  },

  target: "web",
  devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: true,
    liveReload: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        use: ['file-loader','url-loader']
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

尝试两种方式引入图片均无法显示：

• import图片后作为img标签的src属性值
• 在CSS中使用background-image:url()

相关代码如下：

React组件代码：

import React from 'react';
import './LoginScreen.css';
import i from '../../Images/online_auction.jpg'

const LoginScreen = ()=>{
    return (
        <div className="container">
            <img src={i}/>
            <label>Sign In</label>
            <input />
        </div>
    )
}


export default LoginScreen;

CSS代码：

*,*::before,*::after{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}

.body{
    margin: 0
}

.container{
    background-image: url("../../Images/online_auction.jpg");
    height: 220vh;
    width: 100vw;
    background-size: cover;
}

问题根源 #

1. file-loader与url-loader同时使用会导致资源处理冲突，Webpack按顺序执行loader时会出现路径解析错误
2. CSS中的图片引用需要css-loader正确解析相对路径并替换为打包后的资源路径

修复步骤 #

1. 替换图片处理规则（推荐用Webpack5内置资源模块） #

移除冲突的file-loader和url-loader，改用Webpack5原生的资源模块，配置更简洁且兼容性更好：

{
  test: /\.(png|svg|jpg|jpeg|gif)$/i,
  type: 'asset',
  generator: {
    filename: 'images/[name][ext]' // 图片打包后输出到public/images目录
  }
}

• asset会自动判断：小于8kb的图片转为base64内嵌到代码，大于8kb的输出为独立文件
• generator.filename指定输出路径，确保资源能被devServer正确访问

2. 显式配置css-loader的url解析 #

修改CSS规则，确保css-loader能正确处理样式中的图片路径：

{
  test: /\.css$/i,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        url: true // 启用url路径解析，默认开启但显式配置更稳妥
      }
    }
  ],
}

3. 验证目录结构与路径 #

确认你的Images目录位于项目根目录，组件和CSS中的../../Images/online_auction.jpg相对路径正确，配合上述Webpack配置，打包后会自动替换为/images/online_auction.jpg这类可访问的路径

4. 检查devServer配置 #

当前devServer.static: ["./public"]的配置没问题，因为图片会输出到public下的子目录，devServer会自动映射该目录下的资源

内容的提问来源于stack exchange，提问作者John