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:/// 是服务器本身添加的，因此找不到图像。 尝试将图像存储在 asset 文件夹中并给出该路径的 url。那么你就可以走了。