Question

我从请求中收到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工作？

Answer 1

如果没有小提琴手可以玩，我会感觉你被角色的$ sce服务抓住了：

默认情况下，Angular仅加载来自同一域的模板协议作为申请文件。这是通过调用完成的模板URL上的$ sce.getTrustedResourceUrl。从中加载模板其他域和/或协议，您可以将它们列入白名单或换行它成为值得信赖的价值。

../ photos / profile可能不属于“可信域名”。

您可以将url参数“包装”到受信任的域响应中。看看this simple approach - 并注意答案不是带绿色检查的答案。

谨慎使用

就像快速警告一样 - 如果该URL源以某种方式由用户编辑并且未经您的后端代码验证，则此方法可能会导致安全问题。你基本上是在说“放松 - 这是一个安全的网址”，所以你要确保它确实是一个安全的网址。

一般情况下，请勿在您的用户提供的网址上使用该信任过滤器，或者从数据库/存储库中提取该网址，除非您有适当的安全措施以避免加载unsafe image content。