当模型更改时，AngularJS不会更新img src

Question

我使用ng-src加载图片。值从某个范围变量加载，如下所示：

<img ng-src="{{currentReceipt.image}}"/>

我的问题是，当我运行delete $scope.currentReceipt时，它会使ng-src属性为空，但不会在src属性中反映出来。因此，我一直看到我需要空占位符的图像。

我该如何处理？

Answer 1

这是ngSrc和ngHref指令的预期行为。这些指令仅支持识别新路径，但当路径不可用时，指令将exit silently（我在此处看到拉取请求。）。

因此，可能的解决方法是使用ngShow和ngHref在图像变量不再可用时完全隐藏标记：

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

Answer 2

在删除$ scope.currentReceipt后调用$ scope。$ apply（）。

Answer 3

以下解决方案适合我：

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

Answer 4

您实际上可以检查长度并执行

 <img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">