Angular Image src not updating although variable is populated

Question

I have the following code:

app.component.html:

<button (click)="updateImage('image1.png')"></button>

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

app.component.ts:

selectedImage;

updateImage(image) {
    this.selectedImage = image;
}

My question is...If image url has been passed, why isn't the image src updating?

try binding it with [src]="selectedImage" and see if it works — Ayaz Hussein
– Ayaz Hussein, Commented Jan 10, 2018 at 10:21

Ashraful Islam · Accepted Answer · 2018-01-10 10:21:58Z

2

use [src] instead of src

<img [src]="selectedImage" alt="" />

answered Jan 10, 2018 at 10:21

Ashraful Islam

1,26311 silver badges15 bronze badges

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

Comments

Stan · Accepted Answer · 2018-01-10 11:14:07Z

0

Also, ensure that your pathing is correct. The code looks good, but the app may not find your image. There would be an error 404 in your browser console if that were the case.

Try placing the image in your assets folder and linking it with updateImage('/assets/image1.png')

edited Jan 10, 2018 at 11:14

answered Jan 10, 2018 at 10:33

Stan

4761 gold badge6 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular Image src not updating although variable is populated

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related