How to use <img src> in webpack?

Question

When I'm trying to load an image

<img class="brand" alt="Brand" width="50%" height="50%" src="/logo.jpg">

It produces the following error:

logo.jpg:1 GET http://localhost:8080/logo.jpg 404 (Not Found)

webpack.config.js:

module: {   
    loaders: [
        {
            test: /\.html$/,
            exclude: /index\.html$/,
            loader: 'html-loader?root=./assets/images&interpolate&name=./views/[name].[ext]'
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=10000&name=./assets/images/[name].[ext]'
        }
    ]
}

Answer 1

You have to import/require your image in your entry js file and that image will be processed and added to your output directory and the Logo variable will contain the url of that image after processing

import Logo from './logo.jpg';

Another way is to use html-loader and import it in your entry js file . Then you can use the usual src attribute as in html.