node.js - get image from backend api and display in angular

Question

I want display image in angularV10 and get it from backend and I don't know why image not display and got error I'm looking for how to solve but I don't get answer please can someone guide me

back-end:

     get_image:async(req,res,next)=>{
        Image.findAll().then(data=>{
          res.send(data)
        }) }

api:

    router.get("/get_image",uploadController.get_image)

Front-end Angular : service.ts

    get_file(): Observable<any>{
      return this.http.get(baseUrl + '/get_image'  , { responseType: 'Blob' as 'json' })}

code:

      createImageFromBlob(image: Blob) {
         let reader = new FileReader();
         reader.addEventListener("load", () => {
            this.imageToShow = reader.result; <<< this.imageToShow
         }, false);
      
         if (image) {
            reader.readAsDataURL(image);
            console.log(image)
         }
      }
    
      get_image():void{
    this.AddFileService.get_file().subscribe(data=>{
      this.createImageFromBlob(data);
    console.log(data)
    })}

html:

    <img [src]="imageToShow "/>

Error :

big error

unsafe:data:application/json;base64, ..... alot of chars i don't under stand 

Answer 1

Not much in the way of detail to this, but hopefully I can at least clear some things up for you so that you can find your footing with the issue a little better.

The lot of characters you don't understand are the base64 encoded string of the image (if your code is producing an image, appropriately, at least).

What you want to show as an image is a data URI and it looks much like you've shown:

data:image/jpeg;base64,[a lot of characters]

Depending on the actual image type, it might not be image/jpeg, it might be image/png, etc.

There's two things wrong with that final block you've shown:

unsafe:data:application/json;base64, ..... alot of chars i don't under stand 

The first one, having now told you what it should look like, is that it thinks the data is application/json instead of the expected image/xyz. So your process for constructing that data URI is wrong somewhere. I suspect it's where you are telling in your blob type is supposed to be json (thus, application/json):

get_file(): Observable<any>{
  return this.http.get(baseUrl + '/get_image'  , { responseType: 'Blob' as 'json' })}

The second is the clue to the main issue that you are really seeing: unsafe:....

In order to display images in Angular in this fashion, you need to put those URIs and whatnot through the DomSanitizer:

constructor(private readonly sanitizer: DomSanitizer) {}

public safeImage: SafeUrl;

private getImage(...): void {
  const imageBase64String = this.createImageFromBlobOrSomething(...);

  this.safeImage = this.sanitizer.bypassSecurityTrustUrl(imageBase64String);
}

And your template will then use safeImage instead:

<img [src]="safeImage"/>

That will stop the unsafe:... error, but then you'll find that you won't see an image, because the data URI is for application/json, instead of an image type, which you'll need to go ahead and fix.

Edit: My approach for multiple images is to save the images (if you want to keep the initial images for further usage/manipulation) or just only save the safe url version of them...

this.rawImages = data; // Wherever your images come from, and if you want to keep them...

this.safeImages = [];
this.rawImages.forEach((img) => {
  this.safeImages.push(this.sanitizer.bypassSecurityTrustUrl(img));
});

Then instead of *ngForing the raw images themselves, do it over the safeImages array instead:

<div *ngFor="let safeUrl of safeImages">
  <img [src]="safeUrl">
</div>