Angular Not allowed to load local resource: file:///C:/

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"; }

Continue reading...