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

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'>