Comment assigner un blob à une image src en utilisant angular

Question

Je vais chercher une image via une requête http qui renvoie un blob et je veux affecter le blob renvoyé à une image src.

demande http :

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

    return this.httpClient.get(url, options)

component.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
}

composant.html

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

L'image src n'est pas assignée et dans la console, je peux voir ce qui suit.

blob : http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2 14:00:00.664 non sécurisé:blob : http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2:1 GET non sécurisé:blob : http://localhost:4200/f846a3aa-8cd3-4876-8dd3-972c9469feb2 net::ERR_UNKNOWN_URL_SCHEME

Answer 1

Message sur :unsafe signifie qu'angular a nettoyé votre url, parce qu'il la considère comme dangereuse. La façon la plus propre de contourner ce problème est d'introduire un pipe (bien que ce ne soit pas nécessaire) : comme ceci :

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

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

Ensuite, dans votre composant, vous pouvez faire ce qui suit :

composant.html

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

component.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)
}

Bien sûr, vous pouvez faire le contournement dans votre ngOnInit à la place, mais il est plus propre d'utiliser pipe. De plus, étant donné que l'url est créé de manière asynchrone, il pourrait être utile de faire une vérification de nullité dans le modèle.