ng-src 不适用于公用文件夹中的本地 URL



我从请求中收到JSON Obj,这个Obj的图像URL如下:

$scope.userObj = {Name: "Jone", img_url: "../photos/profile"}

我用ng-src显示如下:

<img ng-src="{{userObj.img_url}}" alt="" align="left">

但是我看到破碎的图像,如果我直接用ng-src写它,很奇怪,因为:

<img ng-src="../photos/profile" alt="" align="left">

它正在工作。

我该如何解决?为什么ng-src不适用于 JSON 中的本地存储(动态),而是适用于本地存储静态 URL?

没有小提琴手可以玩,我有一种感觉,你被$sce服务的角度抓住了:

默认情况下,Angular 仅加载来自同一域的模板,并且 协议作为应用程序文档。这是通过调用来完成的 $sce.getTrustedResourceUrl 在模板 URL 上。从中加载模板 其他域和/或协议,您可以将它们列入白名单或包装 它变成一个可信的值。

../photos/profile 可能位于该"受信任域"之外。

您可以将 url 参数"包装"到受信任的域响应中。 看看这个简单的方法 - 请注意,答案不是带有绿色复选标记的答案。

谨慎使用

作为一个快速的警告 - 如果该URL源以某种方式可由用户编辑并且未由后端代码验证,则此方法可能会导致安全问题。 你基本上是在告诉有角度的"放松 - 这是一个安全的网址",所以你要确保它实际上是一个安全的网址。

通常,不要对用户提供的 URL 或从数据库/存储库中提取的 URL 使用该信任筛选器,除非你采取了保护措施来避免加载不安全的图像内容。

最新更新