Angular2 [src] causing 404 error when loading image dynamically

Question

i´ll try to load an image after the page is loaded into a modal form that opens on click.

My image Tag looks like this:

<img src="/src/files/bstand{{detailEntry.bearbeitungsstand}}.png">

The image source is correct. But when i load the page my variable detailentry is empty because i am fill it on click of a button. so the console shows me a 404 error with url: "/src/files/bstand.png" which does not exist Wehen ic Click the button the image is loaded properly.

I remember that i used ng_src in angular 1 and the equivalent shout be [src] i thought but it does not work.

Thank you for any answer!

did u try [src]="'/src/files/bstand' + detailEntry.bearbeitungsstand + '.png'" ? — Dhyey
– Dhyey, Commented Jul 7, 2017 at 14:04

Sebastian Krysiak · Accepted Answer · 2017-07-07 14:14:45Z

1

You can wait for the detailEntry with ngIf

<img *ngIf="detailEntry.bearbeitungsstand" src="/src/files/bstand{{detailEntry.bearbeitungsstand}}.png">

edited Jul 7, 2017 at 14:14

answered Jul 7, 2017 at 14:04

Sebastian Krysiak

9216 silver badges14 bronze badges

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

1 Comment

Erik Heissig Over a year ago

Thanks that was the answer!

Tim B · Accepted Answer · 2017-07-07 14:04:55Z

1

You could use *ngIf to keep the image tag from being rendered without a valid src.

<img *ngIf="detailEntry.bearbeitungsstand" src="/src/files/bstand{{detailEntry.bearbeitungsstand}}.png">

answered Jul 7, 2017 at 14:04

Tim B

2,36815 silver badges21 bronze badges

1 Comment

Erik Heissig Over a year ago

Thanks that was the answer!

Collectives™ on Stack Overflow

Angular2 [src] causing 404 error when loading image dynamically

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related