Selectively exclude dynamic image paths from webpack with angular2

问题

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 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.

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

EDIT: 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.

回答1:

Have you tried:

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

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

来源：https://stackoverflow.com/questions/38205980/selectively-exclude-dynamic-image-paths-from-webpack-with-angular2