1

I am using Angular 7 and am trying to sanitize images from the local system in order to be displayed in the chrome browser, but for each method I am getting the error: Not allowed to load local resource: file:///C:/poze/poxulet/poza_profil.jpg [http://localhost:4200/].

Does anybody have an idea what could be wrong?

This is the first method that I tried:

In template .html

<img mat-card-image [src]="domSanitizer.bypassSecurityTrustUrl(service.image)"/>

In component class .ts:

  export class ServicesComponent implements OnInit {
  constructor(public domSanitizer: DomSanitizer) {}

  ngOnInit() {
  service.image = "C:/poze/poxulet/poza_profil.jpg";
  }

This is the second method:

In template .html

 <img mat-card-image [src]="getSanitizeUrl(service.image)"/>

In component class .ts

 export class ServicesComponent implements OnInit {
 constructor(public domSanitizer: DomSanitizer) {}

 public getSanitizeUrl(url : string): SafeUrl {
   return this.domSanitizer.bypassSecurityTrustUrl(url);
 }

  ngOnInit() {
  service.image = "C:/poze/poxulet/poza_profil.jpg"; }
uzzi
  • 551
  • 2
  • 9
  • 29
  • You can find the answer for the same here : https://stackoverflow.com/questions/53222357/angular-6-sanitize-local-drive-url/53224277#53224277 – Joel Joseph Jun 13 '19 at 17:12
  • Also you need to use the file:/// protocol (yes, that's three slashes) if you want to link to local files. But Chrome won't download local files using the file:/// protocol anyway (giving you a Not allowed to load local resource error) . You may check following article :https://stackoverflow.com/questions/18246053/how-can-i-create-a-link-to-a-local-file-on-a-locally-run-web-page – Joel Joseph Jun 13 '19 at 17:17

1 Answers1

0

file:/// is added by the server itself so it didn't find the image. Try to store image in asset folder and give url of that path. Then You are good to go.

Kunal Vats
  • 1
  • 1