Display image using Angular 4 src

Question

Using AngularJS it was possible displaying images like this:

ng-src="public/img/{{item.image}}"

Where {{item.image}} is stored in MongoDB.

My question therefore is pretty straightforward... How would I achieve the same thing in Angular 4?

DeborahK · Accepted Answer · 2017-09-06 20:33:58Z

4

Something like this:

<img src = "public/img/{{item.image}}">

Or alternatively as Pankaj pointed out:

<img [src] = "'public/img/' + item.image">

There is a chapter in the Angular docs that map AngularJS features to Angular features that may be helpful:

answered Sep 6, 2017 at 19:56

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

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

2 Comments

I know you must have mistakenly missed it. You might want to do like [src]="'public/img/'+item.image"?

Yea, I just cut and pasted his right hand side. So my original answer is not actually correct. I'll update it. THANKS!

Vega · Accepted Answer · 2017-09-06 19:57:56Z

1

With either of these :

<img src="public/img/{{item.image}}" />
<img [src]="'public/img/'+item.image" />

answered Sep 6, 2017 at 19:45

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Brahma Rishi · Accepted Answer · 2018-10-15 02:50:53Z

0

Something like this works as well:

<img [src] = `public/img/${item.image}`>

Use backticks instead of single or double quotes and ${variable_name}.

answered Oct 15, 2018 at 2:50

Brahma Rishi

2211 gold badge2 silver badges10 bronze badges