CODEWITHSUNDEEP
reactjswebpack
ongelo
ongelo

Reputation: 195

Webpack - image imported by url-loader & file-loader is blank

I am trying to import image file into my React component by using url-loader/file-loader. I don't get any errors but the picture doesn't display.

When I copy the address of the image, I get this:

data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI3NTg5MmMyNDc4ODhiYzVhMmVkNDgyODhiNzQzZTg4Ni5wbmciOw==

Here is what my webpack.config looks like:

...
module: {
  rules: [
     ...,
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                    limit: 8192
                    }
                }
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        }               
  ]
}
...

This is how import it:

import LogoImg from '../../style/img/logo_banner.png';

And this is how I use it:

<img src={LogoImg} />

Upvotes: 1

Views: 806

Answers (1)

Adam
Adam

Reputation: 3965

You should only be using one rule for each file type. When importing images in this way, use file-loader only.

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

Upvotes: 2

Related Questions