-3

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

here table of image in mysql

georgeawg
  • 48,608
  • 13
  • 72
  • 95
yaser DeV
  • 11
  • 1
  • 1
  • 5

2 Answers2

4

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>
Krenom
  • 1,894
  • 1
  • 13
  • 20
  • thank you for response ... your code is good for one image but i have alot in table what i can do ? in backend i write Image.findAll() so that mean i have use *ngFor but i get this error : ERROR Error: Cannot find a differ supporting object 'SafeValue must use [property]=binding: [object Blob] (see http://g.co/ng/security#xss)' of type 'object'. NgFor only supports binding to Iterables such as Arrays – yaser DeV Dec 03 '20 at 11:36
  • Basically you need to handle getting those multiple images in the first place, and getting them into an array that you can iterate over. If the images happen to be only one part of a list of data you're getting, you can always hit a method to do it `` and have that method simply `return this.sanitizer.bypassSecurityTrustUrl(image);` – Krenom Dec 03 '20 at 15:00
-1

ok anyone use blob for any file image pdf is not good decide

the best solution i do upload image to backend and generate URL

this website is helpful if you use node.js here

yaser DeV
  • 11
  • 1
  • 1
  • 5