从有角度2的webpack中选择性地排除动态图像路径 [英] Selectively exclude dynamic image paths from webpack with angular2

问题描述

我正在使用Webpack编写Angular2应用程序，并且还在模板中使用html加载器.

I'm writing an Angular2 app using Webpack, and also using the html loader for my templates.

我的其中一个模板中包含以下行:

I have this line in one of my templates:

<img attr.src="apps/{{ appName }}/icon.png" />

html-loader试图在编译时加载此图标，但失败.如您所知，我的意图是使图标的路径是动态的(这是ngFor的一部分)，因此我希望webpack在编译时忽略它.

html-loader is understandably trying to load this icon on compile time, and fails. As you can understand, my intention is for the path to the icon to be dynamic (this is part of an ngFor), and thus I want webpack to ignore it during compile time.

如何指示html-loader忽略此特定的img源?

How can I instruct html-loader to ignore this particular img source?

我发现可以完全禁用html loader中的属性解析(即，在编译时不会加载任何图像源或html中包含的任何其他内容)，但是我希望能够有选择地排除仅特定的图像路径.

I found that one can disable attribute parsing completely in html loader (ie, no image sources or indeed anything else contained in the html will be loaded in compile time), but I'd like to be able to selectively exclude only specific image paths.

推荐答案

您是否尝试过:

<img [src]="'apps/' + appName + '/icon.png'" />

ng-book2 中对此进行了描述，以解决您遇到的问题正面临着. (顺便说一句好书)

This is described in ng-book2, as a way to get around the problem you are facing. (Great book by the way)

这篇关于从有角度2的webpack中选择性地排除动态图像路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！