我使用 ng-src 指令是为了避免浏览器在 Angular 评估表达式之前请求图像。
ng-src={{image}} 将在表达式“image”更改时更新图像的 src 属性。
我误解了为什么如果表达式（“myImage.png”）变为空（“”），ng-src 指令不会更新图像的路径。
当表达式变为空时，ng-src 属性变为空，但 src 属性仍然是最后一个已知的 src。所以它不会更新图像。为什么 src 属性没有更新（为空的 src）以使图像“消失”。
这是plunker
谢谢
【问题讨论】：
标签： angularjs
这个问题的答案在 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 建议的事情来解决这个问题。
【讨论】：
MadScone 的建议是一个很酷的想法，但它不适用于所有浏览器。我最终只在 src 不为空时才显示元素：
<img ng-show="theImage!==''" ng-src="{{theImage}}">
在阅读了 MadScone 引用的线程 (here) 后，这对我来说似乎是最安全的选择。正如许多人指出的那样，接受的答案并非在所有浏览器中都有效，并且可能会出现其他一些问题。简单地隐藏元素就可以避免这一切。
更新：
正如 enpenax 在 cmets 中指出的那样，ng-show 中的 !=='' 完全没有必要。这是更清洁的版本：
<img ng-show="theImage" ng-src="{{theImage}}">
【讨论】：
查看开发者的回答，显然我最初建议的这种方法可能不适用于所有浏览器。
我不完全确定为什么会发生这种情况，但无论如何这里有一种解决方法。将此函数添加到您的控制器：
$scope.getImage = function(src) {
if (src !== "") {
return src;
} else {
return "//:0";
}
};
“空白”图像将获得//:0 的来源，这不会导致出现丢失的图像图标（请参阅this thread 上的最佳答案）。
然后您可以使用以下方式设置来源：
<img ng-src="{{getImage(superImage)}}" />
编辑：
实际上，将按钮单击更改为这样会更容易：
<button ng-click="superImage = '//:0'">Remove superImage</button>
那么就不需要这个函数了。虽然我觉得函数方法更好。
【讨论】：
return src || "//:0";
另一种解决方法：
<img ng-src="{{image?image:' '}}" />
【讨论】：
通过 set value = " "; 带空格。
我还添加了以下 css 以确保它不显示。
img[src="_"]
display none !important
这里已经讨论过真正的原因：https://github.com/angular/angular.js/issues/1218
【讨论】：
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 = '';
【讨论】：
<img data-ng-src="{{image || 'http://www.1x1px.me/FFFFFF-0.png'}}" data-ng-model="image">
您可以选择任何适合您网站的 1x1px 图片并替换您自己的http://www.1x1px.me/FFFFFF-0.png。对于我的网站，我使用http://www.1x1px.me 上的可用图片。
P/S：不用担心img标签的原始src属性，因为它不受图像模型的影响
【讨论】：
清空ng-src 的可能解决方法是here.
<img ng-src="{{image || '//:0' }}" />
使用//:0的详细解释可以看from this answer.
总结一下：
采用当前协议，省略主机名，端口设置为零，无效，应被网络层杀死。
另外，如果您有一个默认图像源，那么您可以简单地将ng-src 设置为该默认源，而不是清空ng-src，而ng-src 必须为空。
【讨论】：
<img src="{{superImage}}" />
这按预期工作 编辑：
其他工作，也许你可以使用空字符串。
ng-click="superImage = ' '
使其为空。它不会触发 404
【讨论】：