Angular2（vaadin angular2-polymer）：如何引用图像

Question

我有一个使用聚合物元素的 angular2 / webpack 项目。我正在使用以下元素：

<paper-card image="img/home.jpg">

在我的主页组件中：

首页
- img
  - home.jpg
- home.component.ts

我有以下 webpack 配置：

var webpack = require('webpack');

module.exports = {
devtool: 'cheap-module-eval-source-map',

output: {
    path: './public/js/app',
    publicPath: "/js/app/",
    filename: 'bundle.js',
    chunkFilename: '[id].chunk.js'
},
entry: {
    'app': './assets/app/main.polymer.ts'
},

resolve: {
    extensions: ['.js', '.ts']
},

module: {
    loaders: [
        {
            test: /\.ts$/,
            loaders: [
                'awesome-typescript-loader',
                'angular2-template-loader',
                'angular2-router-loader'
            ]
        },
        {
            test: /\.html$/,
            loader: 'html'
        },
        {
            test: /\.css$/,
            loader: 'raw'
        }
    ]
},

plugins: [
    new webpack.ContextReplacementPlugin(
        // The (\|\/) piece accounts for path separators in *nix and Windows
        /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
        './src' // location of your src
    )
]
};

该应用程序已正确加载并且我已显示 angular/聚合物组件。所以基地设置正确。但是，当我查看纸卡元素时，我看不到其中的图像。我还在开发工具中看到从未提供图像。

我需要更改什么才能正确显示图像？可能是 webpack 配置？

Answer 1

肯定是我们的项目设置有问题，要么是文件夹结构有问题，要么是 webpack config 少了什么。

据我所知，您的 webpack 配置没有任何针对图像文件的加载程序。我想，这就是现在发生的事情：

Webpack 不知道如何处理你的图像，因此它不会处理它。
图像 url 未经修改进入浏览器。
然后浏览器从输出 public 路径请求图像，但它不在那里，因为它停留在应用程序源路径中的组件文件附近。

基本上，您有两个选择：

继续，不对图像进行 webpack 处理。您可以直接将图像移动到 public 文件夹中，因此它直接从那里提供，它的 url 是永久的，并且 webpack 不会触及图像文件，也不会修改 url .
或者，您可以将图像保存在组件文件附近的应用源路径中。这需要扩展 webpack 配置和图像文件的加载器，例如，使用 file-loader:
```
loaders: [
  /* ... */
  {
    test: /\.(jpe?g|png|gif|svg)/i,
    loader: 'file'
  }
]
```
这样，webpack 加载图像，然后将其复制（“发出”）到输出文件夹，然后使用输出文件路径修改引用此图像的路径。

Answer 2

只需要在 webpack 配置中添加：

    plugins: [
    new webpack.LoaderOptionsPlugin({
        // test: /\.xxx$/, // may apply this only for some modules
        options: {
            htmlLoader: {
                attrs: ['paper-card:image']
            }
        }
    })
]

Angular2（vaadin angular2-polymer）：如何引用图像

Angular2 (vaadin angular2-polymer): How to reference images

vaadin

webpack

polymer-1.0

angular