Why is webpack trying to load images?

Question

webpack

I'm using an HTML loader to load directly into an HTML js file. In the controller, I write that the template will be such and such an HTML file

class BloodController {

    constructor(storageService, httpService){

    }

}

export const BloodComponent = {
  template: require("./blood.html"), // The template in which the images are connected
  controller: ['storageService', 'httpService', BloodController] 
};

blood.html

<div class="row">  

    <div class="col s6">
        <img src="img/omron2.png" alt="">
    </div>

    <div class="col s6">
        <img src="img/omron3.png" alt="">
    </div>

</div>

webpack.config.js

module: {
    loaders: [
        { // используем ES6 to ES5
          exclude: /(node_modules|bower_components)/,
          test: /\.js$/,
          loader: 'babel?presets[]=es2015&compact=true',
        },
        {
          exclude: /(node_modules|bower_components)/,
          test: /\.html$/,
          loader: 'html'
        },
        { 
          exclude: /(node_modules|bower_components)/,
          test   : /\.scss$/,
          loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
        }
    ]
  }

source for webpack

[email protected]:~/Develop/omron/source$ tree
.
├── js
│   ├── app.module.js
│   ├── components
│   │   ├── blood
│   │   │   ├── blood.component.js
│   │   │   └── blood.html
│   └── services
│       ├── httpService.js
│       └── storageService.js
└── my-index.ejs

build (Already by default, there are pictures in the img folder)

[email protected]:~/Develop/omron/webapp$ tree
.
├── public
│   ├── css
│   │   └── materialize.min.css
│   ├── img
│   │   ├── favicon.png
│   │   ├── omron2.png
│   │   ├── omron3.png
│   ├── index.html
│   └── js
│       ├── app.js
├── server.js

But when i run webpack

ERROR in ./source/js/components/blood/blood.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/omron2.png in /home/splincode/Develop/omron/source/js/components/blood
 @ ./source/js/components/blood/blood.html 1:275-302

ERROR in ./source/js/components/blood/blood.html
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/omron3.png in /home/splincode/Develop/omron/source/js/components/blood
 @ ./source/js/components/blood/blood.html 1:389-416
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

What's wrong?

Answer 1

Because html-loader implies work in conjunction with file-loader ( details on the example of a similar loader). If normal text import is meant, then replace it with raw-loader.