Question

我要显示产品列表。此列表还包括产品照片。例如，包括产品名称，产品标题，照片URL和。。。是。

export interface Product {
   id:number;
   productTitle:string;
   productName:string;
   color:string;
   productImageName:string;
   price:number;
   gurantyMonth:string;
   gurantyCompanyName:string;
   catId:number;
   values:Productdetail[];
}

我将请求发送到服务器，如下所示：

  public GetProductList():Observable<Product[]>{
    return this.http.get<Product[]>(this.url+'GetProductList',{headers:this.headers})
          .pipe(
                 tap(() => this.log(``)),
                 catchError(this.handleError<any>(''))
              );
 }

这是Headers =>

const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json; charset=utf-8' }) };

和我的服务器获取以下地址：

file:///C:/Users/Mr-Programer/Downloads/585e4bcdcb11b227491c3396.png

我的图片是这个地址，它返回真实的地址，但是角度不显示我的图片，而是说我unsafe。

单独环境中的后端和前端

出了什么问题？如何解决此问题并在Angular中显示图像？如何在其中使用Blob？

Answer 1

您必须将Url解析为SafeUrl。使用软件包DomSanitizer获取方法bypassSecurityTrustUrl(value: string): SafeUrl。阅读here。

export class MyComponent {
  constructor(private domSanitizer: DomSanitizer) {}

  exampleFunction(imageUrl: string): SafeUrl {
    return this.domSanitizer.bypassSecurityTrustUrl(imageUrl);
  }
}

使用Blob

1 个答案: