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

Question

我正在使用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"; }

Answer 1

file：///是服务器本身添加的，因此找不到图像。 尝试将图像存储在资产文件夹中，并提供该路径的URL。那你就走了。