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

您必须使用模板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
    };
})

Answer 2

使用require导入：

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

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

另外，静态的简单方法是使用CSS background-image属性。