Image saved in blob returns net error::ERR_UNKNOWN_URL_SCHEME Angular

Question

I’m trying to migrate my app from Electron to Angular, my goal is to show an image uploaded by a user and to do this I did this :

page.component.ts

 uploadImageFile(){
    fileDialog({}, files =>{ //I use the fileDialog library that returns a FileList
      if(files[0])
      {
        this.filePath=URL.createObjectURL(files[0])
      return this.sanitizer.bypassSecurityTrustUrl(this.filePath)
      }else{console.log(":/"); return false};
    })
}

page.component.html

img src="{{filePath}}" ngif="filePath" class="image2" width="200" height="250">

But the program returns this error:

WARNING: sanitizing unsafe URL value blob:http://localhost:4200/3f4bdf10-8080-4f4b-ba3f-15a7f85c6d69 (see https://g.co/ng/security#xss)

GET unsafe:blob:http://localhost:4200/3f4bdf10-8080-4f4b-ba3f-15a7f85c6d69 net::ERR_UNKNOWN_URL_SCHEME

Any advice on how to fix it?

Answer 1

Bypass security and trust the given value to be a safe for style URL and Resource URL

In this case you need to use bypassSecurityTrustUrl which means

a value that can be used in hyperlinks or <img src>

bypassSecurityTrustResourceUrl which means

a location that may be used to load executable code from, like <script src>, or <iframe src>.

I hope you are clear with this solution