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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17492980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:30:56  来源:igfitidea点击:

AngularJS doesn't update img src when model changes

javascripthtmlangularjs

提问by Sergei Basharov

I use ng-srcto load images. Value is loaded from some scope variable, like this:

ng-src用来加载图像。值是从某个范围变量加载的,如下所示:

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

My issue is that when I run delete $scope.currentReceipt, it makes ng-srcattribute empty but doesn't reflect it in srcattribute. So as a result I keep seeing that image where I need empty placeholder.

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

How can I deal with it?

我该如何处理?

回答by Stewie

This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently(I see a pull request here.).

这是 ngSrc 和 ngHref 指令的预期行为。这些指令仅支持识别新路径,但是当路径不可用时,指令将静默退出(我在这里看到一个拉取请求。)。

So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:

因此,当图像变量不再可用时,可能的解决方法是使用 ngShow 和 ngHref 来完全隐藏标签:

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

回答by Hardik Chauhan

call $scope.$apply() after delete $scope.currentReceipt.

删除 $scope.currentReceipt 后调用 $scope.$apply()。

回答by Mingyu

The following solution works for me:

以下解决方案对我有用:

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

回答by Michel Arteta

You can actually check for length and do

你实际上可以检查长度并做

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