加载图像时找不到资源，其名称取决于AngularJS变量

Question

我在我的网站上使用AngularJS，一些图像加载如下：

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

问题是我在控制台中发现404错误，找不到图像，因为在角度加盖之前它会尝试加载名为{{ person.username }}的图像

我该如何解决这个问题？

Answer 1

使用ng-src

  

在src属性中使用{{hash}}之类的Angular标记不起作用   右：浏览器将使用文字文本从URL中获取   {{hash}}直到Angular替换{{hash}}中的表达式。该   ngSrc指令解决了这个问题。

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

Answer 2

您可以简单地使用：

ng-src

示例：

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

Answer 3

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