使用 angular2 选择性地从 webpack 中排除动态图像路径答案

【问题标题】：Selectively exclude dynamic image paths from webpack with angular2使用 angular2 选择性地从 webpack 中排除动态图像路径
【发布时间】：2016-07-05 14:26:06
【问题描述】：

我正在使用 Webpack 编写一个 Angular2 应用程序，并为我的模板使用 html 加载器。

我的一个模板中有这一行：

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

html-loader 可以理解地试图在编译时加载这个图标，但失败了。正如你所理解的，我的意图是让图标的路径是动态的（这是ngFor 的一部分），因此我希望 webpack 在编译时忽略它。

如何指示 html-loader 忽略这个特定的 img 源？

编辑：我发现可以在 html 加载器中完全禁用属性解析（即，没有图像源或 html 中包含的任何其他内容将在编译时加载），但我希望能够有选择地排除只有特定的图像路径。

【问题讨论】：

标签： angular webpack webpack-html-loader

【解决方案1】：

你试过了吗：

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

ng-book2 对此进行了描述，作为解决您面临的问题的一种方法。（顺便说一句很棒的书）

【讨论】：

感谢您的回答，但我该怎么做呢？我在 ng2 文档中找不到 NgSrc 组件，那篇文章只简要提到了 ng-src。你是说 [src] 吗？
更好的解决方案是在模型中包含整个 url，然后您可以使用 ="appNameUrl" 而不是在视图中加入字符串。
谢谢。毕竟我在我的组件中使用了一个函数。