如何使用ng-src加载前端映像

Question

我有一个api终点，它会返回一个图像作为响应。因此，我直接将ng-src绑定到一个图像标签，其终点就像这样

<img data-ng-src="https://loventedtest.appspot.com/image/255fe126-bfa8-4b7b-ac14-b53751b88470" />

我想知道的是显示前期图像，直到图像从服务器加载，或者如果在服务器上找不到图像，则保留前期图像。我不确定，我怎么能让它成为可能，有什么建议吗？

Answer 1

有关详细信息，请参阅此 Plunkr 。

也许你可以用css解决你的问题。在你的HTML：

<img class="img-wrapped" ng-src="{{ imgSrc }}">

在你的css中：

.img-wrapped {
  width: 200px;
  height: 200px;
  background-image: url(http://www.placehold.it/200x200);
}

出于兼容性目的（也在Firefox上测试过），您可以包装您的img。 加价：

<div class="img-wrapper">
  <img ng-src="{{ imgSrc }}">
</div>

css：

.img-wrapper {
  width: 200px;
  height: 200px;
  background-image: url(http://www.placehold.it/200x200);
}

请参阅 updated Plunkr

Answer 2

ng-src允许您使用数据绑定。您可以在控制器中使用名为$ scope.imageUrl的字符串，并使用
   

 img data-ng-src="{{imageUrl}}" 

在你的HTML文件中。然后，您可以在控制器中更改该变量的值，它将自动更改该图像。