angular 2 variable in property breaks template rendering

Question

I have a template that contains this snippet

<img src="{{ src }}" onerror="this.src='{{ placeholderSrc }}'" />

I couldn't make it work. If I remove the onerror bit:

<img src="{{ src }}" />

the template works again. If I change placeholderSrc's position:

<img src="{{ src }}" onerror="this.src=''" />
{{ placeholderSrc }}

It works.

It seems to have something to do with onerror but I'm not sure exactly what.

I'm on RC 5.

Maximilian Riegler · Accepted Answer · 2016-09-27 15:25:29Z

1

<img [src]="src" (error)="src = placeholderSrc" />

Plunker for a working example

answered Sep 27, 2016 at 14:37

23.6k4 gold badges65 silver badges73 bronze badges

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

2 Comments

while it makes the template work again, the image source isn't replaced upon an error.

Works like a charm for me - see this Plunker