加载名称取决于AngularJS变量的图像时未找到资源

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

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

问题是，我在控制台中收到404个错误，该图像找不到，因为在加载angular之前，它尝试加载名为

{{person.username}}

如何解决此问题？

使用

在src属性中使用像{{hash}}这样的角度标记是行不通的 右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式。这个 ngSrc指令解决了这个问题

您只需使用：

ng src

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

示例：

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

---

问题在于，浏览器试图在通过angular计算表达式之前加载资源。

---

这就是为什么应该使用内置指令ng href或ng src。

将src更改为ng src。根据angular：在src属性中使用像{{hash}}这样的角度标记是不正确的：浏览器将从URL获取文本{{hash}}，直到angular替换{{hash}中的表达式。ngSrc指令解决了这个问题。