我有一个使用聚合物元素的angular2 / webpack项目。我使用以下元素:
<paper-card image="img/home.jpg">
在我的家庭组件中:
我有以下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配置?
答案 0 :(得分:2)
我们的项目设置肯定有问题,要么文件夹结构错误,要么缺少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']
}
}
})
]