Webpack-由url-loader和file-loader导入的图像为空白

时间:2018-09-27 02:09:11

标签: reactjs webpack

我正在尝试使用url-loader / file-loader将图像文件导入我的React组件。我没有任何错误,但是图片没有显示。

当我复制图像的地址时,我得到了:

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} />

1 个答案:

答案 0 :(得分:1)

每种文件类型只能使用一个规则。以这种方式导入图像时,仅使用file-loader

rules: [
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            'file-loader'
        ]           
    }
]