-1

I work with Angular 9 Within my project, I read the photos from the local address and want to display it But I encounter an error in the browser console and it does not read the image. How do I solve my problem?

TS:

urlPic="E:\project\Assessment of professors\Evaluation_BackEnd\Evaluation\Evaluation.Web\wwwroot/Images/User\effc9f02-b597-47c7-9edc-ee2ba03455ac.jpg";

HTML:

<div class="col-xs-12" >
  <img [src]="urlPic" >
</div>

Console: enter image description here

  • Check this post: https://stackoverflow.com/questions/4090712/why-cant-i-do-img-src-c-localfile-jpg – brz Dec 03 '20 at 07:27

1 Answers1

0

Oh, I just answered a question that might be of use, considering the errors in question are related to unsafe URLs.

Assuming that Angular/the browser is happy to reference your local files and show them (assumption as it's not something I've gone ahead and done), and the only issue is your unsafe URLs, then you just need to use the DomSanitizer:

constructor(private readonly sanitizer: DomSanitizer) { }

// Done as a quick and dirty getter to save on code
public get safeUrlPic(): SafeUrl { return this.sanitizer.bypassSecurityTrustResourceUrl(this.urlPic); }

And then your img src will use that instead:

<div class="col-xs-12" >
  <img [src]="safeUrlPic" >
</div>
Krenom
  • 1,894
  • 1
  • 13
  • 20
  • Thanks for your help, but I used the photo many times and it has a problem This problem is as long as the project is running on local, can this problem be solved by using extensions or something else? –  Dec 03 '20 at 10:33
  • Unfortunately, I suspect breez's comment is more relevant than my own. Following his link, the answer does indeed seem to be that an extension or some such is required. – Krenom Dec 03 '20 at 10:37