Как отобразить SVG в Angular в качестве URL-ссылки, а не использовать сам объект SVG? - PullRequest
Новая
       37

Как отобразить SVG в Angular в качестве URL-ссылки, а не использовать сам объект SVG?

0 голосов
/ 23 мая 2019

У меня в настоящее время есть SVG в URL, который я хочу рендерить в Angular через HTML.Поскольку блок, в котором я пытаюсь отобразить SVG, находится в цикле for, я пытаюсь динамически отобразить SVG с помощью URL-ссылки, как показано ниже:

Наше приложение имеет AngularJS AND Angular6, и ясмог визуализировать SVG через url на стороне AngularJS, используя тег объекта с ng-attr-data = "svgUrl".Я пробовал разные комбинации тегов img и тегов объектов с более новым синтаксисом, но не могу заставить его отображаться, как в 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 - это URL SVG.В настоящее время он отображается как пустой, с пустым #document, хотя URL SVG отображается нормально, когда открывается отдельно в браузере.

Ответы [ 2 ]

0 голосов
/ 24 мая 2019

Понял, ребята, оказалось, что в angular есть встроенные механизмы защиты XSS, вызывающие сбой рендеринга.Исправлено с помощью дезинфицирующего средства в URL.

0 голосов
/ 24 мая 2019

Элемент <object> не имеет атрибута xlink:href.

Я думаю, вы, вероятно, имели в виду: 

<object *ngIf="item.color.imageFeatured.includes('mockupSvg')"
        [data]="item.color.imageFeatured" type="image/svg+xml"></object>
...