Angular 9:不允许加载本地资源:file:/// D:/desktopbackup/grains/index.jpg

问题描述 投票:0回答:2

我正在创建一个小的角度应用程序,其中我正在显示本地文件夹中的图像。但是在加载页面时,我得到以下错误

不允许加载本地资源:file:/// D:/desktopbackup/grains/index.jpg。如下所示,component.html文件中的img标签

 <img class="dashboadImage" [src]="sanitizeImageUrl()" alt="Card image cap">

在我拥有的component.ts文件中

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

在构造函数中,我已注入DomSanitizer

constructor(private sanitizer: DomSanitizer) { }

sanitizeImageUrl(): SafeUrl {
 return this.sanitizer.bypassSecurityTrustUrl("D:/desktopbackup/grains/index.jpg");
}

我已经阅读了几篇文章,以在angular中使用本地资源,每个地方都有相同的地方,但是我仍然遇到错误“不允许加载本地资源:file:/// D:/desktopbackup/grains/index.jpg”

请帮助我。

angular angular5 angular9
2个回答
0
投票

您无法访问这样的本地资源,因为浏览器将限制对此资源的访问。而是应将图像文件放在Angular项目的“ assets”文件夹中。资产文件夹将在您的角度项目中可用,如下所示,

Angular Project |_ src |_ assets

因此,在您的情况下,如果谷物文件夹放置在资产中,则可以像下面这样引用它,<img class="dashboadImage" src="assets/grains/index.jpg" alt="Card image cap">


0
投票

这根本不可能。您无法从浏览器访问本地文件。这不利于安全。唯一的办法是只有文件输入才能查看本地,这是一种可行的方法。您不能动态填充它。因此,如果您想使用文件,则

  1. 在api端执行并从api返回文件
  2. 或将它们带到项目资产文件夹。
© www.soinside.com 2019 - 2024. All rights reserved.