如何包含angular2 webpack资产中的图像

Question

我构建了一个angular2 webpack应用程序。

将图片放入'src / assets / images / 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

这对我使用文件加载器（npm install file-loader --save-dev）...

在webpack.common.js

module: {
    loaders: [

        ...

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

        ...
    ]
}

然而，仍然没有使“style =”属性中的背景有效，这对于最佳实践来说可能是一件好事。