webpack html-loader 没有在 Angular 应用程序中用 require 语句替换 src 属性答案

【问题标题】：webpack html-loader not replacing src attributes with require statements in Angular appwebpack html-loader 没有在 Angular 应用程序中用 require 语句替换 src 属性
【发布时间】：2015-09-18 00:43:01
【问题描述】：

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

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 标签的现有网站并将其用作测试。

【问题讨论】：

你有没有想过这个问题？我正在努力解决同样的问题。谢谢。

标签： image loader src webpack

【解决方案1】：

你必须使用模板道具而不是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
    };
})

【讨论】：

【解决方案2】：

使用require 进行导入：

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

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

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

【讨论】：