Angular 不允许加载本地资源：file:///C:/答案

【问题标题】：Angular Not allowed to load local resource: file:///C:/Angular 不允许加载本地资源：file:///C:/
【发布时间】：2019-06-13 16:40:52
【问题描述】：

我正在使用 Angular 7 并尝试清理本地系统中的图像以便在 chrome 浏览器中显示，但对于每种方法，我都会收到错误消息：不允许加载本地资源：file:///C:/poze/poxulet/poza_profil.jpg [http://localhost:4200/].

有人知道可能出了什么问题吗？

这是我尝试的第一种方法：

在模板.html中

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

在组件类.ts中：

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

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

这是第二种方法：

在模板.html中

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

在组件类.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"; }

【问题讨论】：

你可以在这里找到答案：stackoverflow.com/questions/53222357/…
如果你想链接到本地文件，你还需要使用 file:/// 协议（是的，那是三个斜线）。但是 Chrome 无论如何都不会使用 file:/// 协议下载本地文件（给你一个 Not allowed to load local resource 错误）。您可以查看以下文章：stackoverflow.com/questions/18246053/…

标签： angular image sanitize

【解决方案1】：

file:/// 是由服务器自己添加的，所以它没有找到图像。尝试将图像存储在资产文件夹中并提供该路径的 url。那么你就可以走了。

【讨论】：