Reactjs 如何使用webpack捆绑动态图像路径

webpack可以很好地使用

import

语法

从“../public/assets/image1.png”导入image1

image1.png

已成功绑定

但是我想使用下面的道具传递图像src

常量路径=['../public/assets/image1.png'，'../public/assets/image2.png']
常量父项=（）=>{
返回(
);
};
const Child=（{srcPath}）=>{
返回(
)
}

网页包未绑定png文件

在没有

导入

语法的情况下，如何让webpack捆绑？

我的网页包版本是5.24.3，这是我的

webpack.config.js

//webpack.config.js
module.exports={
模式：“发展”，
条目：{index:path.resolve（_dirname，“src”，“app.tsx”）}，
输出：{
path:path.resolve（_dirname，“build”），
assetModuleFilename:“图像/[hash][ext][query]”，
},
解析：{extensions:[“.ts”、“.tsx”、“.js”]}，
模块：{
规则：[
{test:/\.tsx？$/，加载程序：“ts加载程序”}，
{test://\（png | svg | jpg | jpeg | gif）$/i，键入：“资产/资源”}，
],
},
插件：[
新HtmlWebpackPlugin({
模板：“public/index.html”，
}),
],
开发服务器：{
contentBase:path.join（\uu dirname，“build”），
主机：“本地主机”，
港口:港口,，
历史上的倒退：是的，
热：是的，
},
};