Webpack file-loader not working for images. Creating curropted file and img src is pointed to that file

I am using webpack file-loader to load images into an HTML page. It is generating a corrupted file and using src as that file, in img tag.

this is my setting in webpack.config.js

{
            test: /\.(jpg|png|gif|svg)$/,
            use:
            [
                {
                    loader: 'file-loader',
                    options:
                    {   
                        name: '[name].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/'
                    }
                }
            ]
        },

final image tag which is generated

<img src="8c7b2da10ea507a829fd.jpg" alt="">