Using Angular to Display a List of Images using a Blob

Question

I want to show a list of photos using a blob, but it is not displaying any of the images. I created and provided a link to an example in stackblitz. What have I missed that can be used to resolve this issue?

I'm using this code for downloading an image :

getImage(imageUrl: string): Observable<Blob> {
  return this.http.get(imageUrl, { responseType: 'blob' });
}

and retrieve the images using a service:


CreateImageBlob(imageUrl: string): void {
   this.productService.getImage(imageUrl).subscribe(
     (val)=>{
       this.getImageFromService(val)
     },
     response => {
      console.log("POST in error", response);
    },
    () => {
      console.log("POST observable is now completed.");
    });
}

Using this to create a new file:

public getImageFromService(image:Blob){
  let reader=new FileReader();
  reader.addEventListener("load",()=>{
    this.imageBlobUrl=reader.result;
  },false);

  if(image) {
    reader.readAsDataURL(image)
  }
}

and finally the template for displaying the image looks like:

Welcome to Stack Overflow. We can not accept that essential parts of a question (or answer) are outsourced, for the simple reason that we don't know how long the link will stay alive, and that we don't want to have half questions in 2 years with nobody able to catch anything about it. So please, include everything necessary for us to understand your problem (the so-called minimal reproducible example), in the question itself, and not behind a link. — Kaiido
– Kaiido, Commented Feb 2, 2019 at 7:59
@Kaiido i edit the question . please help me for solve this problem — Mr-Programer
– Mr-Programer, Commented Feb 2, 2019 at 8:33
I'm not an angular ninja and may not be the one the most prone to help you, but note that you don't need this asynchronicity in getImageFromService. It could be rewritten to getImageFromService(image:Blob) { this.imageBlobURL = new URL.createObjectURL(image); }. This may or may not fix your problem, but will anyway make it simpler and use less memory, as a rule of thumb, you don't need readAsDataURL unless you know you do. — Kaiido
– Kaiido, Commented Feb 2, 2019 at 9:55

mtpultz · Accepted Answer · 2019-02-02 11:20:52Z

2

There are quite a few things I would suggest to get you to a solution. What you're doing is invoking an observable, subscribing to the result, and applying a Subscription to a binding of src. Fundamentally this won't work, and you at least need to drop the subscribe, use the map pipe operator, and the async pipe based on your current code.

You should read up on how to use Angular's async pipe, which would allow you to do something like: <img [src]="src$ | async"> and have it bind the response properly - @see AsyncPipe
You should read up on Observables, specifically BehaviorSubject- @see Understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject
You should read up on DomSanitizer when binding - @see DomSanitizer
Finally, I would give an isolated component the job to render the image

Here is a simple (naive) example:)

edited Feb 2, 2019 at 11:20

answered Feb 2, 2019 at 11:06

mtpultz

18.5k24 gold badges128 silver badges211 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mtpultz Over a year ago

Hi @Mr-Programer when you use the DomSanitizer you're saying that you trust the content you are displaying. It is a way to show information that Angular would not by default. Based on your use case this is the way to bind an image source. If you remove the DomSanitizer in the example you'll see the images disappear.

Collectives™ on Stack Overflow

Using Angular to Display a List of Images using a Blob

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related