如何在Angular中实现延迟加载动态img src

Question

我需要你的帮助弄清楚这一点：我用动态src在我的应用程序中加载了几个图像，所以基本上我不能预先确定它们的源代码，因为它取决于某些参数，如：

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

我尝试了很多懒加载插件，但他们并不在这种情况下工作。

我该如何解决这个问题？

非常感谢您提前。

Answer 1

我想你需要的是NG-SRC

这是一个例子

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

这是官方文档AngularJs

Answer 2

我觉得你的代码应该只是罚款什么。只需尝试使用tile.name并删除过滤器即可。下面是一个例子假设“瓦片”变量正在从HTTP调用

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

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

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

填充Angularjs保持重新运行消化循环，以确保所有（内角）的内插被分配的值。