如何在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保持重新運行消化循環，以確保所有（內角）的內插被分配的值。