image - 如何包含来自 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';

图片未加载。

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=”属性中的背景起作用，这对于最佳实践来说可能是一件好事。