Reactjs 网页包-通过url加载程序导入的图像&;文件加载器为空
我正在尝试使用url加载器/文件加载器将图像文件导入React组件。我没有收到任何错误,但图片没有显示 当我复制图像的地址时,我得到:Reactjs 网页包-通过url加载程序导入的图像&;文件加载器为空,reactjs,webpack,Reactjs,Webpack,我正在尝试使用url加载器/文件加载器将图像文件导入React组件。我没有收到任何错误,但图片没有显示 当我复制图像的地址时,我得到: data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI3NTg5MmMyNDc4ODhiYzVhMmVkNDgyODhiNzQzZTg4Ni5wbmciOw== 以下是我的webpack.config的外观: ... module: { rules:
data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI3NTg5MmMyNDc4ODhiYzVhMmVkNDgyODhiNzQzZTg4Ni5wbmciOw==
以下是我的webpack.config的外观:
...
module: {
rules: [
...,
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
...
这是如何导入它的:
import LogoImg from '../../style/img/logo_banner.png';
我就是这样使用它的:
<img src={LogoImg} />
每个文件类型只能使用一条规则。以这种方式导入图像时,请仅使用
文件加载器
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
'file-loader'
]
}
]
这解决了我的问题!非常感谢。