Selectively exclude dynamic image paths from webpack with angular2

Question

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.

Des Horsley · Accepted Answer · 2016-07-06 09:21:33Z

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)

edited Jul 6, 2016 at 9:21

answered Jul 6, 2016 at 7:02

Des Horsley

1,88821 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FrontierPsycho Over a year ago

Thank you for the answer, but how do I do that? I can't find an NgSrc component in the ng2 docs, and that article only briefly mentions ng-src. Do you mean [src]?

Des Horsley Over a year ago

A better solution would be to have the entire url in your model, and then you can use ="appNameUrl" rather than joining the strings in the view.

FrontierPsycho Over a year ago

Thanks. I used a function inside my component after all.

Collectives™ on Stack Overflow

Selectively exclude dynamic image paths from webpack with angular2

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related