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

【问题标题】：Angular 9 : Not allowed to load local resource: file:///D:/desktopbackup/grains/index.jpgAngular 9：不允许加载本地资源：file:///D:/desktopbackup/grains/index.jpg
【发布时间】：2020-09-25 10:10:10
【问题描述】：

我正在创建小角度应用程序，在其中显示本地文件夹中的图像。但是在加载页面时我遇到了错误

不允许加载本地资源：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"

请帮帮我。

【问题讨论】：

你为什么要这样加载？
你不能把你的图片保存在 assets 文件夹中吗..？
我需要显示来自其他项目的图像。其他项目会将图像文件保存在该文件夹中，并且从该文件夹中我必须使用 Angular 项目在 UI 上显示，这就是为什么我不能放入资产中文件夹。谢谢

标签： angular angular5 angular9

【解决方案1】：

您不能像这样访问本地资源，因为浏览器会限制对它的访问。相反，您应该将图像文件放在 Angular 项目中的“assets”文件夹中。资产文件夹将在您的 Angular 项目中可用，如下所示，

Angular Project |_ src |_ assets

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

【讨论】：

我可以放在 assets 文件夹中，它工作正常，但我的要求是显示项目根文件夹之外的其他文件夹中的图像
在这种情况下，图像应该在服务器中而不是在用户的本地计算机中。将其部署为 Web 服务器并尝试使用服务器 url ("localhost:1111/grains/index.jpg") 访问它。PS：确保正确处理域，否则在访问资源时可能会出现跨域错误。