如何使用动态 img src 在 Angular 中实现延迟加载答案

【问题标题】：How to implement lazy loading in Angular with dynamic img src如何使用动态 img src 在 Angular 中实现延迟加载
【发布时间】：2016-10-21 12:46:32
【问题描述】：

我需要您的帮助来解决这个问题：我在我的应用中使用动态 src 加载了几张图像，所以基本上我无法预先确定它们的来源，因为它取决于某些参数，例如：

<img src="assets/images/{{tile.name | sanitiseString}}.jpg">

我尝试了很多延迟加载插件，但它们在这种情况下不起作用。

我该如何解决这个问题？

非常感谢您。

【问题讨论】：

标签： angularjs image lazy-loading src

【解决方案1】：

我认为你需要的是 ng-src

这是一个例子

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

这是官方文档AngularJs

【讨论】：

【解决方案2】：

我认为您的代码应该可以正常工作。只需尝试使用 tile.name 并删除过滤器即可。这是一个假设“tile”变量是从 http 调用中填充的示例

<img src="{{imgPath}}">

$http.get('https://jsonplaceholder.typicode.com/photos/1')
   .then(function(response){

     $scope.imgPath = response.data.url;
   })

Angularjs 不断重新运行摘要循环以确保所有插值（在 Angular 内）都被赋值。

【讨论】：