webpack html-loader che non sostituisce gli attributi src con le istruzioni require in Angular App

Question

Ho cercato di imparare l'angolare. Ho un progetto di test che ho messa a punto seguendo questo tutorial:

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

Ho cercato di aumentare in modo da utilizzare il codice HTML-loader per analizzare i miei file html e sostituire lo src sulle mie tag img con richiedono dopo la compilazione. Senza fortuna. Posso ottenere il caricatore di scss per cambiare il contesto dell'immagine ad esso. Posso anche richiedere l'immagine nel controller per la mia vista. Ma se lascio solo l'attributo src del tag img da solo con un url relativo, non fa nulla.

Ecco il mio caricatori in 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" 
    } 
] 

Ed ecco la mia umile tag html IMG:

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

Cercando di refactoring un sito esistente che ha tonnellate di linea tag img e l'utilizzo di questo come prova

Answer 1

È necessario utilizzare template sostenere invece di TemplateURL:

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

Invece di

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

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

Answer 2

Usa require per l'importazione:

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

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

Inoltre, modo semplice per statica è quello di utilizzare Proprietà CSS background-image.