2017-03-02 39 views
0

循环我有下面的格式返回数据的API:SVG在Angular2

[{"title": "first", "icon": "firstIcon.svg"}, 
{"title": "second", "icon": "iconForSecond.svg"} 
. 
. 
] 

我想这些添加到使用* ngFor的Angular2页。我可以使用易于使用SVG作为图像做到这一点:

<div *ngFor=""> 
    <img [src]='item.icon'/> item.title 
</div> 

但是,如果我尝试做同样的事情,使用SVG的,规定在[1],因为我希望能够运用CSS悬停SVG等风格。我似乎无法得到它的工作。我尝试的两种方法都不行。

<object data="item.icon" type="image/svg+xml"> // Does not work 
<object [data]="item.icon" type="image/svg+xml"> // Does not work 

我该怎么办?我在这里错过了什么?

[1] Do I use <img>, <object>, or <embed> for SVG files?

回答

0

检查这一个

<object data="{{ 'path/to/svg/' + item.icon }}" type="image/svg+xml"> 
    <img src="yourfallback.jpg" /> 
</object>