Binding Angular <object> svg data property

Question

I tried many attempts to bind SVG data path but no one seems to work. Here my code:

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [data]="icon.path"></object>
</div>

Ts:

    public icons = [ {name: '...', path: '/svg/...svg', href: 'https://...'},..,];

I tried to use [data], data = "{{...}}", and so on. I am not getting any particular error, just I am not able to visualize any image. I am using object tag to have the possibility to change the "fill" property dynamically. I tried to directly write the path within the data property of the object tag and it works correctly. Any ideas on how to solve the problem?

Dyd666 · Accepted Answer · 2018-11-08 14:44:36Z

4

What about the attr.data?

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [attr.data]="icon.path"></object>
</div>

as shown here.

EDIT:

Would be better to sanitize the path before.

<!-- COMPONENT -->

    import { DomSanitizationService } from '@angular/platform-browser';

    @Component({
      ...
    })
    export class SvgComponent {

      private sanitizer;

      constructor(sanitizer: DomSanitizationService ) {
        this.sanitizer = sanitizer;    
      }

      svgURL(url) {
        return this.sanitizer.bypassSecurityTrustUrl(url);
      }
    }

<!-- TEMPLATE -->

    <div *ngFor="let icon of icons"">
        <object type="image/svg+xml" [attr.data]="svgURL(icon.path)"></object>
    </div>

edited Nov 8, 2018 at 14:44

answered Nov 8, 2018 at 14:02

Dyd666

7351 gold badge11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Simone Salvo Over a year ago

Thanks, already tried but without any success. I am getting the following error: Error: unsafe value used in a resource URL context

Simone Salvo Over a year ago

Solved by using that solutions link and attr.data.

Dyd666 Over a year ago

Perfect, few moments ago i've updated my answer with more or less the same solution ;)

Gil Epshtain · Accepted Answer · 2022-06-15 08:59:20Z

2

The problem is that Angular will block the URL due to security issues. You can tell Angular the URL is safe.

Create a new @Pipe as described below and use it in the template

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform 
{
  public constructor(private _domSanitizer: DomSanitizer) {}

  public transform(unsafeUrl: string): SafeResourceUrl {
    return this._domSanitizer.bypassSecurityTrustResourceUrl(unsafeUrl);
  }
}

HTML

<object type="image/svg+xml" [data]="getUrl() | safeUrl"></object>

answered Jun 15, 2022 at 8:59

Gil Epshtain

9,99110 gold badges78 silver badges100 bronze badges

Collectives™ on Stack Overflow

Binding Angular <object> svg data property

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related