空ng-src不会更新图像
我正在使用ng-src指令，以避免浏览器在Angular评估expression式之前请求图像。
如果expression式“image”改变， ng-src={{image}}将更新ng-src={{image}}的src属性。 我误解了为什么如果expression式（“myImage.png”）变为空（“”） ng-src指令不更新图像的path。
当expression式变空时， ng-src属性变为空，但src属性仍然是最后一个已知的src 。 所以它不会更新图像。 为什么src属性没有更新（到一个空的src ），使图像“消失”。
这是一个暴徒
谢谢
这个答案在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-srcexpression式改为一个空string，这将永远不会改变实际的src值。 你可以通过MadScone的build议来解决这个问题。
MadScone的build议是一个很酷的想法，但在所有浏览器中都不适合我。 我结束了只显示元素只有当src不是空的时候：
<img ng-show="theImage!==''" ng-src="{{theImage}}">
在阅读MadScone引用的线程（ 这里 ）之后，这对我来说似乎是最安全的select。 正如许多人指出的那样，所接受的答案在所有的浏览器中都不起作用，还有其他一些可能出现的问题。 只需隐藏该元素就可以避免这一切。
更新：正如在注释中指出的那样，ng-show中的!==''是完全不必要的。 这是更清洁的版本：
<img ng-show="theImage" ng-src="{{theImage}}">
更新（2015年4月）
看到开发者的答案，显然这个我build议原来的方法可能不适用于所有的浏览器。
原件（2014年2月）
我不完全确定为什么会发生这种情况，但是无论如何，这是一种解决方法。 将此function添加到您的控制器中：
$scope.getImage = function(src) { if (src !== "") { return src; } else { return "//:0"; } };
“空白”图像将得到//:0的来源，这将不会导致丢失的图像图标出现（请参阅本主题的最佳答案）。
然后你可以使用以下设置你的源代码
<img ng-src="{{getImage(superImage)}}" />
编辑：
实际上，将button点击更改为：
<button ng-click="superImage = '//:0'">Remove superImage</button>
那么就不需要这个function了。 虽然我觉得function方法比较好。
解决它的另一个简短的方法是： <img ng-src="{{image?image:' '}}" />
通过设置值=“”修复它; 与空白。
我也添加下面的CSS来确保它不显示。
img[src="_"] display none !important
真正的原因已经在这里讨论： https : //github.com/angular/angular.js/issues/1218
<img data-ng-src="{{image || 'http://www.1x1px.me/FFFFFF-0.png'}}" data-ng-model="image">
您可以select适合您的网站的任何1x1px图像，并replace您自己的http://www.1x1px.me/FFFFFF-0.png 。 对于我的网站，我使用http://www.1x1px.me上的可用图像。;
P / S：不需要担心img标签的原始src属性，因为它不影响图像模型
ng-hide和ng-show可以帮助你解决这个问题
<img ng-src="{{Image}}" ng-hide="Image == null" ng-show="Image != null" ng-click="ChooseImage()" width="100%" />
$ scope.Image = null;
要么
<img ng-src="{{Image}}" ng-hide="Image === ''" ng-show="Image !== ''" ng-click="ChooseImage()" width="100%" />
$ scope.Image ='';
可能的解决方法
迫使angular度为空ng-src
另外，如果你有一个默认的图像源，那么当ng-src必须为空时，你可以简单地将ng-src设置为默认的src。
<img src="{{superImage}}" />
这按预期工作编辑：
其他的工作，可能是你可以使用空串。
ng-click="superImage = ' '
把它弄空。 它不会触发404
