如何将Angular中的SVG呈现为URL引用，而不是使用SVG对象本身？
如何将Angular中的SVG呈现为URL引用，而不是使用SVG对象本身？
提问于 2019-05-24 03:36:29
我目前在一个url中有一个SVG，我想通过HTML在Angular中呈现它。因为我尝试呈现SVG的块在for循环中，所以我尝试通过URL引用动态呈现SVG，如下所示：
我们的应用程序有AngularJS和Angular6，我可以使用带有ng- AngularJS -data=“svgUrl”的对象标记，通过AngularJS端的url呈现SVG。我用较新的语法尝试了img标记和object标记的不同组合，但无法像在AngularJS中那样呈现。
<div class="row checkout-items mb-3" *ngFor="let item of orderSummaryModel.items">
//For rendering PNG, works fine
<img *ngIf="!item.color.imageFeatured.includes('mockupSvg')" class="product-image img-fluid" [src]="item.color.imageFeatured" nopin="nopin">
//Trying to render SVG here via url
<object *ngIf="item.color.imageFeatured.includes('mockupSvg')" [attr.xlink:href]="item.color.imageFeatured" type="image/svg+xml"></object>
</div>预期的结果是SVG呈现，其中item.color.imageFeatured是SVG url。它目前显示为空白，带有一个空的#document，尽管SVG url在浏览器中单独打开时呈现良好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-25 04:12:22
伙计们，搞清楚了，原来angular内置了XSS防御机制，导致渲染失败。已通过对url使用消毒器修复。
Stack Overflow用户
发布于 2019-05-24 10:56:38
<object>元素没有xlink:href属性。
我想你的意思可能是：
<object *ngIf="item.color.imageFeatured.includes('mockupSvg')"
[data]="item.color.imageFeatured" type="image/svg+xml"></object>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56281900
复制相关文章
相似问题
腾讯云开发者
