我正在创建一个小的角度应用程序,其中我正在显示本地文件夹中的图像。但是在加载页面时,我得到以下错误
不允许加载本地资源: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项目的“ assets”文件夹中。资产文件夹将在您的角度项目中可用,如下所示,
Angular Project
|_ src
|_ assets
因此,在您的情况下,如果谷物文件夹放置在资产中,则可以像下面这样引用它,<img class="dashboadImage" src="assets/grains/index.jpg" alt="Card image cap">
这根本不可能。您无法从浏览器访问本地文件。这不利于安全。唯一的办法是只有文件输入才能查看本地,这是一种可行的方法。您不能动态填充它。因此,如果您想使用文件,则