空ng-src不会更新图像

Question

我正在使用ng-src指令,以避免浏览器在Angular评估表达式之前请求图像.

ng-src={{image}}如果表达式"image"发生变化,将更新图像的src属性.我误解了为什么如果表达式("myImage.png")变空(""),ng-src指令不会更新图像的路径.

当表达式变空时,ng-src属性变为空,但src属性仍然是最后一个已知的src.所以它不会更新图像.为什么src属性没有更新(到空src),以便图像"消失".

这是一个掠夺者

谢谢

Answer 1

MadScone的建议是一个很酷的主意,但它并不适用于所有浏览器.我最后只在src不为空时才显示元素:

<img ng-show="theImage!==''" ng-src="{{theImage}}">

在阅读了MadScone引用的帖子(这里)之后,这对我来说似乎是最安全的选择.正如许多人在那里指出的那样,接受的答案并不适用于所有浏览器,并且可能会出现一些其他问题.简单地隐藏元素就可以避免这一切.

更新: 正如评论中指出的那样,!==''ng-show完全没必要.这是更清洁的版本:

<img ng-show="theImage" ng-src="{{theImage}}">

Answer 2

对此的答案在Angular代码中.这不是一个错误,只是他们认为他们想要的行为.从第13895行开始,您可以看到此指令代码:

forEach(['src', 'srcset', 'href'], function(attrName) {
   var normalized = directiveNormalize('ng-' + attrName);
   ngAttributeAliasDirectives[normalized] = function() {
   return {
      priority: 99, // it needs to run after the attributes are interpolated
      link: function(scope, element, attr) {
          attr.$observe(normalized, function(value) {

         if (!value)
             return;

         attr.$set(attrName, value);

         if (msie) element.prop(attrName, attr[attrName]);
       });
     }
    };
  };
});

关键在于:

if (!value) return;

如您所见,如果将ng-src表达式更改为空字符串,则永远不会更改实际的src值.你可以绕过这个做MadScone建议的事情.

Answer 3

更新(2015年4月)

看到开发人员的回答,显然我最初建议的这种方法可能不适用于所有浏览器.

原件(2014年2月)

我不完全确定为什么会这样,但无论如何这里有一种解决方法.将此功能添加到您的控制器:

$scope.getImage = function(src) {
  if (src !== "") {
    return src;  
  } else {
   return "//:0"; 
  }
};

"空白"图像将获得一个源//:0不会导致丢失的图像图标出现(请参阅此线程的最佳答案).

然后您可以使用以下方式设置源:

<img ng-src="{{getImage(superImage)}}" />

编辑:

实际上,将按钮点击更改为此更容易:

<button ng-click="superImage = '//:0'">Remove superImage</button>

然后就不需要这个功能了.虽然我认为函数方法更好.

Answer 4

解决它的另一个简短方法: <img ng-src="{{image?image:' '}}" />