ng-src不适用于公用文件夹中的本地URL [英] ng-src not working for local URL in public folder

问题描述

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

I receive JSON Obj from request, and this Obj has image URL as the following:

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

我用过 ng-src 将其显示如下：

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

但是我看到了破碎的图像，如果我直接使用写它是奇怪的事情ng-src ，as：

But I see broken image, The weird thing if I write it directly using ng-src, as:

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

它正在运作。

我该如何解决？为什么 ng-src 从JSON（动态）不能为本地存储工作，但是为本地存储静态URL工作？

How can I fix it ? Why ng-src not working for local storage from JSON (dynamically), but work for local storage static URL ?

推荐答案

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

Without a fiddler to play with, I have a feeling that you're being caught by $sce service in angular:

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

By default, Angular only loads templates from the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on the template URL. To load templates from other domains and/or protocols, you may either whitelist them or wrap it into a trusted value.

../ photos / profile可能在受信任域之外。

../photos/profile might be outside of that "trusted domain."

您可以将url参数包装到受信任的域响应中。看一下这个简单的方法 - 并注意答案不是带绿色检查的答案。

You could 'wrap' the url parameter into a trusted domain response. Take a look at this simple approach -- and note that the answer is NOT the one with the green check.

谨慎使用

正如警告的快速说明 - 这种方法可以带来安全问题，如果该URL源以某种方式由用户编辑，并且不由您的后端代码验证。你基本上是在说放松 - 这是一个安全的网址，所以你要确保它确实是一个安全的网址。

Just as a quick word of warning -- this approach can lead to security problems if that URL source is, somehow, editable by a user and NOT validated by your back-end code. You're basically telling angular "relax -- this is a safe url" so you want to make sure that it IS, in fact, a safe url.

一般来说，不要在您的用户提供的网址上使用该信任过滤器，也不要从您的数据库/存储库中提取该信任过滤器，除非您有适当的安全措施以避免加载不安全的图片内容。

In general, don't use that trust filter on a url that your user provides, or that is pulled from your database/repo unless you have safeguards in place to avoid loading unsafe image content.

这篇关于ng-src不适用于公用文件夹中的本地URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！