Angular 2 如何加载 SVG 图像？

Question

我在 Angular 2 模板中尝试了这段代码：

<ul class="products">
  <li *ngFor="#p of products">
    <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"
         xmlns:svg="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">
         <g>
            <title>{{p.Name}}</title>
            <image xlink:href="http://somewhere.com/{{p.Picture1}}"
                   id="svg_21" height="176.731579" width="117" y="28" x="32" />
        </g>
    </svg></li></ul>

并得到错误：

 EXCEPTION: Template parse errors:
 Can't bind to '@xlink:href' since it isn't a known native property 
 <image [ERROR ->]xlink:href="http://somewhere.com/{{p.Picture1}}"
        id="svg_21" height="176.731579" widt"): AppComponent@13:37

我尝试使用它，这绝对是正确的路径：

attr.xlink:href="http://somewhere.com/{{p.Picture1}}"

但是在使用它时，我反而得到了 not find my-app的错误。

Answer 1

发布问题几秒钟后，我找到了答案：

<image *ngIf="p.Picture1" attr.xlink:href="http://somewhere.com/{{p.Picture1}}" />

显然，如果p.Picture1为空，它更有可能使 html 或 SVG 无效，从而导致找不到my-app ，如下所示。