Webpack5与React环境下img标签无法加载本地图片的问题求助

我花了好几个小时尝试在img的src属性、内联样式的background-image(url)里加载本地图片，但所有方法都不管用。离谱的是启动本地服务器50次只有3次成功显示图片，这问题快把我搞疯了。求问怎么在Webpack5+React环境下，通过img标签、内联样式或SCSS文件正常使用本地图片？

我的Webpack配置 #

const webpackConfig = () => ({
    entry: './src/index.tsx',
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                      name: '[name].[ext]',
                      outputPath: 'images',
                      publicPath: 'images',
                    },
                  },
                ],
              },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    transpileOnly: true,
                },
                exclude: /build/,
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            additionalData: `@import 'src/styles/variables';`,
                        },
                    },
                ],
            }
        ],
    },
    devServer: {
        port: 9100,
        open: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
});

文件夹结构 #

项目中存在logos文件夹，内部包含多层子文件夹及目标图片文件。

我试过但无效的引用方式 #

<img src='../../../logos/epl/teams/arsenal.png' />
<img src='images/arsenal.png' />

解决方案 #

1. 替换file-loader为Webpack5内置资源模块 #

Webpack5已经原生支持资源文件处理，无需依赖file-loader，这是导致加载不稳定的核心原因之一。修改Webpack配置中的图片规则：

{
    test: /\.(png|jpe?g|gif)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'images/[name].[ext]' // 对应原file-loader的outputPath+name配置
    },
    parser: {
        dataUrlCondition: {
            maxSize: 8 * 1024 // 小于8kb的图片转base64，可根据需求调整
        }
    }
}

修改后记得卸载file-loader：npm uninstall file-loader

2. 不同场景的正确引用方式 #

Img标签引用

在组件中先导入图片资源，再绑定到src属性：

// 导入图片（路径根据组件位置调整）
import ArsenalLogo from '../../../logos/epl/teams/arsenal.png';

function TeamLogo() {
    return <img src={ArsenalLogo} alt="阿森纳队徽" />;
}

内联样式background-image引用

同样先导入图片，再通过模板字符串传入样式：

import ArsenalLogo from '../../../logos/epl/teams/arsenal.png';

function TeamBanner() {
    return (
        <div 
            style={{ 
                width: '200px',
                height: '200px',
                backgroundImage: `url(${ArsenalLogo})`,
                backgroundSize: 'cover'
            }} 
        />
    );
}

SCSS文件中引用

直接在SCSS里使用相对路径引用，css-loader会自动处理资源路径：

.arsenal-banner {
    width: 200px;
    height: 200px;
    background-image: url('../../../logos/epl/teams/arsenal.png');
    background-size: cover;
}

3. 额外注意事项 #

• 确保tsconfig.json中配置了正确的模块解析规则：

  {
      "compilerOptions": {
          "moduleResolution": "node",
          "resolveJsonModule": true,
          "esModuleInterop": true
      }
  }
  

• 清理Webpack缓存：执行npx webpack --clean，或者删除node_modules/.cache目录，之前的偶发成功大概率是缓存导致的异常。
• 开发环境下publicPath默认是'/'，若部署到子路径可在Webpack配置中补充output.publicPath: '/'（开发环境）或对应生产路径。

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