如何在angular2中使用webpack的assets引入图片

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';

图片未加载。

- Kery Hu

Answer 1

这对我有用，使用 file-loader（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=”属性中的背景工作，这可能是最佳实践的好事。

- Pat M