のWebPACKは、ダイナミックリンク

Question

私はカスタムイメージを表示し、他の複数のコンポーネントで使用することができ、再利用可能なAngular2コンポーネントを書くことができるようにしたいコンテキストに従っていません。私は、イメージをカスタマイズ可能に表示し、テンプレートで使用する変数を渡したいと思います。しかし、Webpackを使用してビルドする場合、Webpackはファイルを一緒にパッケージ化するときにテンプレート内のリンクをたどろうとし、{{ variableName }}が見つかりません。

私Angular2テンプレートで

コード

：私のWebPACK Configで

<img src='{{ imgToShow }}' /> 

：

{ 
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
    loader: 'file?name=assets/[name].[hash].[ext]' 
    }, 

構築しようとすると、WebPACKのが次のエラーを与える：

Module not found: Error: Can't resolve '{{ imageToShow }}' 

私はすでに力ですべてのイメージをパッケージ化しようとした：

のWebPACKの設定では：

entry: { 
    'img': './app/img.js', 
    'app': './app/app.js' 
} 

アプリで/ img.js：

function requireAll(r) { r.keys().forEach(r); } 
requireAll(require.context('./assets/img/', true, /(\.png|\.jpg|\.gif)$/)); 

しかし、それはまだありません作業。 Webpackはまだファイルを読み込もうとしますが、私の設定でローダーからpngとjpgマッチャーを削除しても、Angular2は実行時にファイルを処理できません。

どのようにWebpackでAngular2のさまざまな画像を動的に表示できますか？

Answer 1

この

<img [src]=' imgToShow ' /> 

今すぐimgToShowを動的に変更することができます試してみてください。