2016-09-18 5 views
3

私はangular2ウェブパックアプリを構築します。私はこのようなテンプレートに含まれている場合angle2 webpackアセットから画像を含める方法

new CopyWebpackPlugin([{ 
      from: 'src/assets', 
      to: 'assets' 
      }]), 

{ test: /\.(jpg|png|gif)$/, loader: 'file' }, 

new AssetsPlugin({ 
     path: helpers.root('dist'), 
     filename: 'webpack-assets.json', 
     prettyPrint: true 
     }), 

'のsrc /資産/画像/ default.png'

webpack.common.js内に画像を入れます:

<img [src]="path" width="160" height="200" /> 

this.path='assets/images/default.png'; 

画像がロードされていません。

答えて

0

これは、これはまだバックグラウンドをしないwebpack.common.js

module: { 
    loaders: [ 

     ... 

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

     ... 
    ] 
} 

に...(NPM --save-devのファイル・ローダーをインストール)ファイル・ローダーを使用して、私のため

を働きましたしかし、 "style ="属性で動作することは、おそらくベストプラクティスにとっては良いことです。

関連する問題