Reactjs Webpack 5资产模块未在中捆绑图像

我正在尝试使用新的Webpack5功能在我的react库中包含一个静态png图像。这个应该是一项基本任务，但我正在努力弄清楚为什么不包括这个图像。我做了以下几件事

将规则作为webpack.config.js的一部分包含

在组件中导入并使用图像

我尝试过的事情

• 使用jpg而不是png
• 回归到文件加载器和url加载器
• 在webpack.config.js中手动包含资产文件夹
• 将图像移动到src
• 使用require（）而不是import
• 使用相对/直接导入
• 向我的诸神祈祷

---

不确定如何单独运行

tsc

。您必须运行

webpack

cli。

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'index.js',
        path: __dirname,
        assetModuleFilename: 'assets/[hash][ext][query]'
    },
    module: {
        rules: [
          {
            test: /\.png/,
            type: 'asset/resource'
          }
        ]
    },
};

import React from 'react';
import image from '../src/assets/transport-belt-down.png'

function RenderedSquare(props: RenderedSquareProps){
    return <img src={image}>image</img>
}

export { RenderedSquare };

../factorio-blueprint-renderer/src/assets/transport-belt-down.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders