0

enter image description hereI want to display images which I am storing using form upload in firebase database. I am facing problem in display image in html. The error is shown as "ERR_INVALID_URL"

According to my research the image is stored in data:image/png;base64 format how to display this image in html?

HTML file

<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" *ngFor="let image of albumImages">
           <img [src]="getSantizeUrl(image.multiImages)" />
        </div>
     </div>
</div>

TS File

export class GalleryComponent implements OnInit {
 albumImages: IPhotos[] = [];

  constructor(private imageUpload: ImageUploadService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.imageUpload.getImages().subscribe((res)=> {
      this.albumImages = res;
      console.log(this.albumImages);
    });
  }
  public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}
}

Service File 

getImages() {
    return this.http.get<{[key: string]: IPhotos}>('https://angularimageupload-3f681.firebaseio.com/.json').pipe( map (responseData => {
      const albumArray: IPhotos[] = [];
      for(const key in responseData) {
        if(responseData.hasOwnProperty(key)) {
          albumArray.push({ ...responseData[key], id: key })
        }
      }
      return albumArray;

    }))
  }

The stored images in firebase should be displayed in html

divya dave
  • 471
  • 1
  • 9
  • 28

1 Answers1

0

First, since it is data:image/png;base64 you need to use bypassSecurityTrustResourceUrl instead of bypassSecurityTrustUrl:

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

Secondly, multiImages is an array containing images. You need to specify any items to pass the URL within the src property: you cannot pass an array to it, so if you trying to loop and display all images of albumImages, try this:

<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" *ngFor="let image of albumImages">
           <img *ngFor="let singleImage of image.multiImages " [src]="getSantizeUrl(singleImage)" />
        </div>
     </div>
</div>
Ethan Vu
  • 2,911
  • 9
  • 25
  • I want to display userImage also but that is not in url format so how can display that ? – divya dave Aug 06 '19 at 08:17
  • @divyadave I suggest to see this question: https://stackoverflow.com/questions/39074806/how-to-preview-picture-stored-in-the-fake-path-in-angular-2-typescript – Ethan Vu Aug 06 '19 at 08:38
  • Ohkay will see this. – divya dave Aug 06 '19 at 08:47
  • I converted the path into url format but when I displaying in html formal [src] = "getSantizeUrl(albumImages.userImage)" the image is not displaying I checked into the firebase the image is getting stored in url format what else can be the case? – divya dave Aug 06 '19 at 11:58
  • If the image path is a URL, you should use `bypassSecurityTrustUrl` – Ethan Vu Aug 06 '19 at 12:01
  • There is another issue I guess I am using bypassSecurityTrustUrl, now I am getting GET http://localhost:4200/undefined 404 (Not Found) – divya dave Aug 06 '19 at 12:08
  • Can you make another question on this case and also give a example of what the URL actually looked like, things you tried ? – Ethan Vu Aug 06 '19 at 12:14
  • I have added separate question for this please check. – divya dave Aug 06 '19 at 12:27