[英]How can Angular 2 load an SVG image?
I tried this code in an Angular 2 template:我在 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>
And got the error:并得到错误:
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
I tried to use this, which is definitely on the right path:我尝试使用它,这绝对是正确的路径:
attr.xlink:href="http://somewhere.com/{{p.Picture1}}"
but in using that, I instead get an error of cannot find my-app
.但是在使用它时,我反而得到了 not find my-app
的错误。
Seconds after posting the question, I found the answer:发布问题几秒钟后,我找到了答案:
<image *ngIf="p.Picture1" attr.xlink:href="http://somewhere.com/{{p.Picture1}}" />
Apparently if p.Picture1
is empty, it invalidates html or SVG more likely in such a way that my-app
is not found, which follows.显然,如果p.Picture1
为空,它更有可能使 html 或 SVG 无效,从而导致找不到my-app
,如下所示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.