Angular 显示图像时获取不安全的URL错误

在控制台中显示图像时出现不安全URL错误

这是我拍的照片

主映像 在另一个组件中，我希望显示我的图像

方法获取图像的路径

readUrlevent{ this.productPrimaryImage=event.target.value； } 警告：正在清理不安全的URL值C:\Users\mayursinghal\Pictures\Screenshot 9.png请参阅

---

首先，您提供的是绝对路径，它将在部署后停止工作。将图像移动到项目中，并使用相对URL，如/images/Screenshot 9.png

第二，取而代之的是youse[src]

---

首先，您提供的是绝对路径，它将在部署后停止工作。将图像移动到项目中，并使用相对URL，如/images/Screenshot 9.png

第二，取而代之的是youse[src]

---

这是Angular发出的警告，因为您的应用程序可能会受到XSS攻击。如果要绕过此安全警告，需要首先清理URL，以确保在UI中安全显示。您可以使用DOMSanizer源执行此操作：

创建一个函数来清理组件中的图像url

从“@angular/platform browser”导入{domsanizer，SafeUrl}； ... constructorprivate消毒剂：DomSanitizer{} sanitizeImageUrlimageUrl:string:SafeUrl{ 返回this.sanitizer.bypassSecurityTrustUrlimageUrl； } 然后在模板中，调用此函数来清理URL

警告：使用不受信任的图像URL调用bypassSecurityTrustUrl会使您的应用程序面临XSS安全风险

---

这是Angular发出的警告，因为您的应用程序可能会受到XSS攻击。如果要绕过此安全警告，需要首先清理URL，以确保在UI中安全显示。您可以使用DOMSanizer源执行此操作：

创建一个函数来清理组件中的图像url

从“@angular/platform browser”导入{domsanizer，SafeUrl}； ... constructorprivate消毒剂：DomSanitizer{} sanitizeImageUrlimageUrl:string:SafeUrl{ 返回this.sanitizer.bypassSecurityTrustUrlimageUrl； } 然后在模板中，调用此函数来清理URL

警告：使用不受信任的图像URL调用bypassSecurityTrustUrl会使您的应用程序面临XSS安全风险

---

我在数据库中添加我的imge路径，然后在另一个页面上显示该图像。在项目中获取移动图像是不可行的解决方案。它不可能是本地文件系统的绝对路径，它必须是可通过web访问的。我正在数据库中添加我的imge路径，然后通过get-apiMoving在其他页面上显示图像在项目中移动图像不是解决此问题的可行方法。它不能是本地文件系统的绝对路径，它必须是可通过web访问的。在SanitizeImageUrl抱歉，我忘了显示需要在构造函数中添加DomSanitizer的部分。签出更新的答案。获取错误不允许加载本地资源：file:///D:/1.jpgThis 是你的Chrome浏览器给你一个错误。理想情况下，您应该使用云存储或将映像托管在某个服务器中，并使API返回一个相对路径，该路径与服务器路径一起应会提供实际映像。如果您正在使用这种特殊的方法获取本地资源的绝对图像路径，那么这个答案中的插件可能会帮助您。注意：您不能使用此映像路径部署到任何地方，此方法应仅用于测试或练习。否则我建议您使用另一种方法，我在前面的评论中已经提到了其中的一些方法。在SanitizeImageUrl中获取null值抱歉，我忘记显示需要向构造函数添加DomSanitizer的部分。签出更新的答案。获取错误不允许加载本地资源：file:///D:/1.jpgThis 是你的Chrome浏览器给你一个错误。理想情况下，您应该使用云存储或将映像托管在某个服务器中，并使API返回一个相对路径，该路径与服务器路径一起应会提供实际映像。如果您正在使用这种特殊的方法获取本地资源的绝对图像路径，那么这个答案中的插件可能会帮助您。注意：您不能使用此映像路径部署到任何地方，此方法应仅用于测试或练习。否则我建议你使用另一种方法，我在前面的评论中已经提到了其中的一些方法。

<img [src] = "x.productPrimaryImage">