以角度 6 和带有 Blob 的 Asp Core 显示图像

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);
  }
}