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
    )
]
};

该应用正确加载＆amp;我有角度/聚合物组件显示。所以基础设置正确。但是当我看到纸卡元素时，我看不到其中的图像。我还在开发工具中看到图像从未提供过。

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

Answer 1

我们的项目设置肯定有问题，要么文件夹结构错误，要么缺少webpack配置。

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

Webpack不知道如何处理您的图像，因此它不会处理它。
图片网址未经修改即显示在浏览器中。
然后浏览器从输出公共路径请求图像，但它不在那里，因为它停留在应用程序源路径中的组件文件附近。

基本上，您有两种选择：

继续不对webpack处理图像。您可以直接在公共文件夹中移动图像，因此直接从那里提供图像，其网址是永久性的，webpack不会触及图像文件，也不会修改网址。
或者，您可以将图像保留在组件文件附近的应用程序源路径中。这需要扩展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）：如何参考图像

2 个答案: