Question

我想从api获取svg并使用image标签显示它。我尝试了以下操作，但不起作用

public svgIcon: any;

public getRequest(url: string) {
  const headers = new HttpHeaders().set('Accept', 'image/svg+xml');
  this.http.get(url,  { headers: headers, responseType: 'blob') }).subscribe({
    const blob = new Blob([svg], {type: 'image/svg+xml'});
    const url = URL.createObjectURL(blob);
    URL.revokeObjectURL(url), {once: true}
    this.svgIcon = url;
  })
}

以及Html中的

<img [src]="this.svgIcon">

Answer 1

如下修改您的订阅部分：

public svgIcon: any;

public getRequest(url: string) {
  const headers = new HttpHeaders().set('Accept', 'image/svg+xml');
  this.http.get(url,  { headers: headers, responseType: 'blob') }).subscribe({
    const blob = new Blob([response], {type: 'image/svg+xml'});
    const url = URL.createObjectURL(blob);
    this.svgIcon= this.sanitizer.bypassSecurityTrustUrl(url);
  })
}

以及您的HTML

<img [src]='svgIcon'>

Answer 2

应该是

<img [src]="svgIcon">

STACKBLITZ DEMO

在Angular中显示带有img标签的SVG

2 个答案: