如何包含來自angular2 webpack資產的圖像

Question

我構建了一個angular2 webpack應用程序。

把圖像中的'的src /資產/圖像/爲Default.png'

和webpack.common.js：

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 
     }), 

當我包括像這樣的模板：

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

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

圖片未加載。

Answer 1

這webpack.common.js爲我工作用的文件加載器（NPM安裝文件裝載--save-DEV）...

module: { 
    loaders: [ 

     ... 

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

     ... 
    ] 
} 

這仍然沒有讓背景在「樣式=」屬性中工作，但這對於最佳實踐來說可能是一件好事。