资源依赖于AngularJS变量

Question

我用AngularJS在我的网站和一些图像加载这样的：

<img ng-cloak src="{{ person.username }}"/> 

的问题是，我得到404错误控制台图像是没有找到，因为在角度被覆盖之前，它试图加载名为{{ person.username }}的图像

我该如何解决这个问题？

Answer 1

使用ng-src

采用了棱角分明的标记像{{哈希}}在src属性不起作用 权利：浏览器将网址提取与文字文本 {{哈希}}，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

<img ng-cloak ng-src="{{ person.username }}"/> 

Answer 2

您可以简单地使用：

NG-SRC

例子：

<img ng-cloak ng-src="{{ person.username }}"/> 

Answer 3

的问题是，浏览器尝试加载资源在表达式由角度评估之前。 这就是为什么应该使用ng-href或ng-src来构建指令的原因。