image - webpack html-loader 不会在 Angular 应用程序中用 require 语句替换 src 属性

Question

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

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

我一直在尝试对其进行增强，以使用 html-loader 来解析我的 html 文件，并在编译后用 require 替换我的 img 标签上的 src 。没有运气。我可以让 scss 加载器将图像的上下文更改为它。我还可以要求 Controller 中的图像以供我查看。但是，如果我只保留 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 属性而不是 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
    };
})