CODEWITHSUNDEEP
webpack
Akansha Srivastava
Akansha Srivastava

Reputation: 231

How to use <img src> in webpack?

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]'
        }
    ]
}

Upvotes: 8

Views: 13624

Answers (1)

Anoop D
Anoop D

Reputation: 1850

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.

Upvotes: 10

Related Questions