Angular2(vaadin angular2-polymer):如何参考图像

时间:2016-12-07 11:39:21

标签: angular webpack vaadin polymer-1.0

我有一个使用聚合物元素的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配置?

2 个答案:

答案 0 :(得分:2)

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

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

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

基本上,您有两种选择:

  • 继续不对webpack处理图像。您可以直接在公共文件夹中移动图像,因此直接从那里提供图像,其网址是永久性的,webpack不会触及图像文件,也不会修改网址。
  • 或者,您可以将图像保留在组件文件附近的应用程序源路径中。这需要扩展webpack配置和图像文件的加载器,例如,使用file-loader

    loaders: [
      /* ... */
      {
        test: /\.(jpe?g|png|gif|svg)/i,
        loader: 'file'
      }
    ]
    

    这样,webpack加载图像,然后将其复制(“发出”)到输出文件夹,然后用输出文件路径修改引用该图像的路径。

答案 1 :(得分:2)

只需添加webpack配置:

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