时间戳

首页 > 解决方案 > 如何使用角度将 blob 分配给图像 src

angular - 如何使用角度将 blob 分配给图像 src

问题描述

我正在通过返回 blob 的 http 请求获取图像，并且我想将返回的 blob 分配给图像 src。

http请求：

   const options = {
        headers,
        responseType: 'blob' as 'json'
    };

    return this.httpClient.get(url, options)

组件.ts

async ngOnInit() {
   this.frontImageSrc = getImage()
}

async getImage() {
    const image = await this.service.imageRequest(id, "front", token).toPromise();
    var imageUrl = URL.createObjectURL(image)
    return imageUrl
}

组件.html

  <img src={{frontImageSrc}} alt="image"/>

图像 src 没有被分配，在控制台中我可以看到以下内容。

blob：http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2 14:00:00.664 不安全：blob：http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2:1 获取不安全：斑点：http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2 net::ERR_UNKNOWN_URL_SCHEME

标签： angular

解决方案

关于:unsafe东西的消息意味着角度清理了您的网址，因为它认为它不安全。解决这个问题的最干净的方法是引入一个管道（尽管不是必需的）：像这样：

@Pipe({ name: 'safeResourceUrl' })
export class SafeUrlPipe implements PipeTransform {
  constructor(private readonly sanitizer: DomSanitizer) {}

  public transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

然后在您的组件中，您可以执行以下操作：

组件.html

  <img [src]="frontImageSrc | safeResourceUrl" alt="image"/>

组件.ts

async ngOnInit() {
   this.frontImageSrc = getImage()
}

async getImage() {
    const image = await this.service.imageRequest(id, "front", token).toPromise();
    var imageUrl = URL.createObjectURL(image)
    return imageUrl
}

ngOnDestroy() {
  URL.revokeObjectURL(this.imageUrl)
}

当然，您可以ngOnInit改为绕过，但使用管道更清洁。此外，由于 url 是异步创建的，因此在模板中进行空检查可能是有意义的。

推荐阅读