角度2とのWebPACK、[ソース]構文

Question

イムと輸入の画像は、このように私の角度2のアプリケーションで画像をインポートしよう：

<img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" /> 

しかし、私は[ソース]タグのWebPACKを使用するときに含まれていません。私のバンドルされたプロジェクトの出力ファイルの画像。次のように画像を含めると、すべてが正常に機能します。

<img *ngIf="person.status" src=require('IMAGE_URL') width="20" height="20" /> 

私のWebPACKの設定は、この（それは、角2つの公式ドキュメントで見つかったWebPACKのチュートリアルに基づいています）のようになります。私は、[ソース]を使用したい理由は絵ということである

module.exports = { 
    entry: { 
    'polyfills': './app/polyfills.ts', 
    'vendor': './app/vendor.ts', 
    'app': './app/main.ts' 
    }, 

    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 

    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['ts', 'angular2-template-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: 'html' 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
     loader: 'file?name=./assets/[name].[hash].[ext]' 
     }, 
     { 
     test:/\.scss$/, 
     exclude: /node_modules/, 
     loader:'style!css!sass' 
     }, 
     { 
     test: /\.css$/, 
     exclude: helpers.root('src', 'app'), 
     loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
     }, 
     { 
     test: /\.css$/, 
     include: helpers.root('src', 'app'), 
     loader: 'raw' 
     }, 
     { 
     test:/\.json$/, 
     exclude: /node_modules/, 
     loader:'json' 
     } 
    ] 
    }, 

    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'vendor', 'polyfills'] 
    }), 

    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
}; 

ランタイム中に動的に変化し、URLは変更可能でなければなりません。私のアプリケーションで[src]タグを使ってインポートされた画像を含むようにwebpackを設定する方法を知っている人はいますか？

Answer 1

コンポーネントファイルに必要（）文を入れて：

​​

その後、あなたはあなたのhtml同じように書くことができます。

<img *ngIf="person.status" [src]="{{IMAGE_URL}}" width="20" height="20" />