webpack html加载程序没有在Angular应用程序中用require语句替换src属性

Question

我一直在努力学习角度。我有一个测试项目，我按照本教程设置：

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

我一直在尝试使用html加载程序来解析我的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-pro而不是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属性。