javascript - 通过安全网址以角度显示图像

Question

我想blobl在 html 中显示带有角度请求的返回图像。

我使用此代码：

    <img [src]="ImageUrl"/>

这是 ts 代码：

private src$ = new BehaviorSubject(this.Url);
    dataUrl$ = this.src$.subscribe(url => {
        return this.imageService.GetImage(url, this.id).subscribe(data => {
            this.ImageUrl=data.changingThisBreaksApplicationSecurity;
            return data.changingThisBreaksApplicationSecurity
        })
    });

这是我的服务：

GetImage(url, id): Observable<any> {
    return this.httpClient
        .get(this.appConfig.apiEndpoint+ url + id, { responseType: 'blob' })
        .pipe(
            map(res => {
                if (res) {
                    return this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(res));
                }
                return null;
            })
        )
}

但是当我需要显示图像时，它会在 html 中使用此 url：

<img src="unsafe:blob:http://localhost:4200/6868babb-5ab2-491f-b519-2f2a3d0ed351">

并且不给我看任何图像。

有什么问题 ？我怎么解决这个问题 ？？？？

标签： javascriptangulartypescript

Answer 1

嗨，我遇到了同样的问题，但我可以通过这种方式解决它

在 html 中

  <img [src]="transform(imageURI)" />

在 ts

 transform(url) {
   return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
 }