Webpack and Angular HTML image loading

Question

I have been breaking my head with webpack and angular. This might have a simple answer but I cant figure it out. I have read almost every answer here in stack overflow on this

Answer 1

The raw-loader is supposed to turn a text file into a CommonJS module that exports the file contents as a string – nothing more.

If you want webpack to recognize the file as HTML and all its references in it, you need the html-loader. The html-loader parses the given file with an HTML parser and picks up references to other files within attributes. By default, that is only <img src="...">. In your case, you need to tell the html-loader to also look for ng-src attributes, like this:

// webpack.config.js

    ...
    loaders: [{
        test: /\.html$/,
        loaders: [
            "html?" + JSON.stringify({
                attrs: ["img:src", "img:ng-src"]
            })
        ]}
    ]