如何通过webpack 2在src包含{{}}的html中加载图像？
我使用html加载器在html中加载img，当img的src是invariable.as<img src='../example.png'>时，它工作得很好。但是当我这样写的时候：<img src="../../../assets/images/device_{{key.deviceName}}.png">，它将是错误：Can't resolve '../../../assets/images/device_{{key.deviceName}}.png' in '/Users/zhangxu/Desktop/LicenseServer/angular/src/app/components/home'。这是我的webpack.config.js：
module: {
rules: [
{
test: /\.ts$/,
loaders:['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]',
},
{
test:/\.html$/,
loader: 'html-loader',
exclude: helper.root('src','index.html')
},
{
test: /\.css$/,
exclude: helper.root('src', 'app'),
loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
},
{
test:/\.css$/,
include: helper.root('src', 'app'),
loader:'raw-loader'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'postcss', 'sass']
}
],
},这是我的HTML：
<div *ngFor="let key of devices;let i = index;">
<div class="device" *ngIf="key.selected && !key.out_select" (click)="cancelSelectDevice(i)">
<img src="../../../assets/images/device_{{key.deviceName}}.png" width="75">
</div>
</div>
如何解决这个错误？谢谢
Stack Overflow用户
发布于 2017-11-13 19:47:21
这里的问题是webpack只为您打包了这些文件，以便在构建过程中解决这些问题。但是您的图像路径是在运行时计算的，所以webpack不知道您需要什么图像/图像。
一种肮脏的方法是导入javascript文件中的每个图像。当你这样做的时候，webpack有机会知道你在编译时想要什么图像。
更干净的方法可能是将这些图像放在一个资产文件夹中，并让您的let服务器为这个文件夹服务。
https://stackoverflow.com/questions/47269598
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号