Webpack - 由 url-loader 和 file-loader 导入的图像是空白的答案

【问题标题】：Webpack - image imported by url-loader & file-loader is blankWebpack - 由 url-loader 和 file-loader 导入的图像是空白的
【发布时间】：2018-09-27 02:09:11
【问题描述】：

我正在尝试使用 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} />

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

您应该只对每种文件类型使用一个规则。以这种方式导入图片时，只能使用file-loader。

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

【讨论】：

这解决了我的问题！谢谢。