webpack html-loader没有用Angular app中的require语句替换src属性

Question

我一直在努力学习角度.我有一个测试项目,我按照本教程设置:

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

我一直在尝试增加它来使用html-loader来解析我的html文件,并在编译后用require替换我的img标签上的src.没运气.我可以让scss加载器将图像的上下文更改为它.我还可以要求控制器中的图像供我查看.但是,如果我只是将img标签的src属性与相对url一起保留,它什么都不做.

这是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"
    }
]

这是我的低html img标签:

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

尝试重构具有大量内联img标记的现有站点并将其用作测试.

Answer 1

您必须使用 template prop 而不是 templateUrl：

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

代替

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

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