Webpack - изображение, импортированное с помощью url-loader & file-loader, пусто

Question

Я пытаюсь импортировать файл изображения в свой компонент React с помощью url-loader / file-loader.Я не получаю никаких ошибок, но изображение не отображается.

Когда я копирую адрес изображения, я получаю это:

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

Answer 1

Вы должны использовать только одно правило для каждого типа файлов.При импорте изображений таким способом используйте только file-loader.

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