angularjs 图像 url 未解析的离子

Question

我正在使用 ionic 创建移动应用程序。

我有一个项目列表，每个项目都有一张照片。

在我的每个项目的 angular 模板中：

<img src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>

我使用 ng-repeat='listing in listings' 来显示模板。

我一直看到 angular 首先调用未解析的 url 但每一行都获得正确的图像并显示它：

所以它首先尝试获取

http://www.example.com/images/listings/{{listing.id}}/thumb.jpg

未解析 {{listing.id}}。

但随后它正确解析并在列表中正确显示图像：

http://www.example.com/images/listings/3523/thumb.jpg

因此，如果我有一个包含 15 个项目的列表，它会使一个调用未解析 {{listing.id}} 并正确解析 15 个调用。

我该如何阻止这种情况发生？

Answer 1

您应该使用 ngSrc 而不是直接使用插值。

<img ng-src='http://www.example.com/images/listings/{{listing.id}}/thumb.jpg'>