angular 4 image src binding issue

Question

I am using angular 4 and is stuck at a point. I am using below code in html component to display data in a table:

<table class="table">
<thead>
    <tr>
      <th>Code</th>
      <th width="22%">Description</th>
      <th>Requested <br> Date</th>
      <th>Status</th>
      <th width="15%">Status change Date</th>
      <th width="10%">User ID</th>
      <th width="31%">Comments</th>
      <th></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let orm of ormData">
      <td>{{orm.code}}</td>
      <td class="specialWidth">{{orm.description}}</td>
      <td>{{orm.reqDate}}</td>
      <td>{{orm.status}}</td>
      <td>{{orm.statusChngDate}}</td>
      <td>{{orm.userId}}</td>
      <td>{{orm.comments}}</td>
      <td><img src={{orm.img}} alt="delete" height=30px" width="30px"></td>
    </tr>
</tbody>

and this is the ormData from ts component:

ormData = [{
'code':'AP1',
'description':'AP Translated and attested by SM',
'reqDate':'29/11/2016',
'status':'pending',
'statusChngDate':'13/12/2016',
'userId':'User ID',
'comments':'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ipsam in.',
'img':'assets/icons/deleteGrey.svg'

}];

Now in my output am getting all data as expected except for the image. Instead of the image text content <img src="assets/icons/deleteGrey.svg" alt="delete" height=30px" width="30px"> is being displayed.

Kindly let me know how can I get my image displayed in the output.

I see you have `'img':'assets/icons/deleteGrey.svg'`. Can you use a .svg extension with ``? — Kris Hollenbeck, Jun 21 '17 at 17:32
Nevermind.. I guess thats valid. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img — Kris Hollenbeck, Jun 21 '17 at 17:33

Sajeetharan · Accepted Answer · 2017-06-21T17:48:59.887

3

You are missing "" at the height attribute,

 <td><img [src]='orm.img'  height="30px" width="30px">
 </td>

DEMO

edited Jun 21 '17 at 17:48

answered Jun 21 '17 at 17:20

Sajeetharan

203,447
57
330
376

thanks for your quick response @Sajeetharan. I tried your method but still getting this in the output instead of the image – Bijay Singh Jun 21 '17 at 17:23
still getting what ? – Sajeetharan Jun 21 '17 at 17:24
do you have a valid url? – Sajeetharan Jun 21 '17 at 17:24
yes, If I remove ngFor from the then image loads properly but if I keep the ngFor it doesn't – Bijay Singh Jun 21 '17 at 17:25
Are you really sure there's a difference between `[src]="foo"` and `src="{{foo}}"`? – Jun 21 '17 at 17:43
check the attached demo – Sajeetharan Jun 21 '17 at 17:46
@torazaburo you can do either way – Sajeetharan Jun 21 '17 at 17:46
thanks @Sajeetharan it worked, I was missing the quotes in the height attribute. – Bijay Singh Jun 21 '17 at 18:01

angular 4 image src binding issue

1 Answers1