webpack html-loader not replacing src attributes with require statements in Angular app

Question

I've been trying to learn angular. I have a test project that I setup following this tutorial:

http://shmck.com/webpack-angular-part-1/

I've been trying to augment it to use the html-loader to parse my html files and replace the src on my img tags with a require after compile. No luck. I can get the scss loader to change the context of the image to it. I can also require the image in the controller for my view. But if I just leave the img tag's src attribute alone with a relative url it does nothing.

Here's my loaders in webpack.config:

loaders: 
[
    {
        test: /\.scss$/,
        loader: 'style!css!sass'
    },
    {
        test: /\.js$/,
        loader: 'ng-annotate!babel!jshint',
        exclude: /node_modules|bower_components/
    },
    {
        test: /\.html$/,
        loader: "html-loader"
    },
    {
        test: /\.json/,
        loader: 'json'
     },
    //not sure if this is still needed
    {
        test: /\.jpe?g$|\.gif$|\.png$/i, loader: "url-loader"
    }
]

And here's my lowly html img tag:

<img src="./darthvader.jpg">

Trying to refactor an existing site that has tons of inline img tags and using this as a test.

Answer 1

You must use template prop instead of templateUrl:

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: require('../views/my-directive.html'),
        transclude: true
    };
})

Instead of

app.directive('myDirective', function() {
    return {
        restrict: 'E',

        //WRONG!!
        templateUrl: '/views/my-directive.html',
        transclude: true
    };
})

Answer 2

Use require for import:

var templateUrl = require('ngtemplate!html!./test.html');

app.directive('testDirective', function() {
    return {
        restrict: 'E',
        templateUrl: templateUrl
    }
});

Also, simple way for static is to use CSS background-image property.