8

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]'
        }
    ]
}
Red
  • 6,599
  • 9
  • 43
  • 85
Akansha Srivastava
  • 231
  • 1
  • 3
  • 9
  • Possible duplicate of [Webpack: Loading images from html templates](https://stackoverflow.com/questions/32753650/webpack-loading-images-from-html-templates) – Guillaume Georges Apr 06 '18 at 06:45

1 Answers1

10

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.

Anoop D
  • 1,522
  • 18
  • 25