2017-06-21 90 views
0

我正在使用角度4,并卡在一个点。我使用以下代码在HTML组件在一个表中显示的数据:角度4图像src绑定问题

<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> 

,这是从TS组件ormData:

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' 

}];

现在在我的输出中获取除图像外的所有数据。正在显示图像文本内容<img src="assets/icons/deleteGrey.svg" alt="delete" height=30px" width="30px">而不是图像。

请让我知道如何让我的图像显示在输出中。

+0

我看你有没有' 'IMG':'资产/图标/ deleteGrey.svg''。你可以使用一个.svg扩展名''吗? –

+0

没关系..我想那是有效的。 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img –

+0

您的意思是实际的文字'' 2017-06-21 17:45:52

回答

1

你缺少 “” 的高度属性,

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

DEMO

+0

感谢您的快速回复@Sajeetharan。我想你的方法,但在输出而不是图像仍然得到这个 delete

+0

仍然得到什么? – Sajeetharan

+0

你有一个有效的URL? – Sajeetharan