更新（2015年4月）

Question

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

如果表达式“image”发生更改，

ng-src={{image}}将更新图像的 src 属性。我误解了为什么如果表达式（“myImage.png”）变空（“”）， ng-src 指令不会更新图像的路径。

当表达式变空时， ng-src 属性变为空，但 src 属性仍然是最后一个已知的 src 。所以它不会更新图像。为什么 src 属性未更新（空 src ），以便图像“消失”。

这是plunker

由于

Answer 1

答案是 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 2

MadScone的建议很酷，但在所有浏览器中都不适用。我最后只是在src不为空时显示元素：

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

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

<强>更新正如enpenax在评论中指出的那样，ng-show中的!==''是完全没必要的。这是更清洁的版本：

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

Answer 3

更新（2015年4月）

请参阅开发人员的回答，显然我最初建议的这种方法可能不适用于所有浏览器。

Original（2014年2月）

我不完全确定为什么会这样，但无论如何这里都是一种解决方法。将此功能添加到控制器：

$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>

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

Answer 4

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

Answer 5

通过设置值=＆＃34;来修复它＆＃34 ;; 用空白。

我还添加了以下css以确保它不会显示。

img[src="_"]
    display none !important

这里讨论了真正的原因：https://github.com/angular/angular.js/issues/1218

Answer 6

<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属性，因为它不会影响图像模型

Answer 7

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 ='';

Answer 8

可以找到清空ng-src的可能解决方法here.

<img ng-src="{{image || '//:0' }}" />

可以找到使用//:0的详细说明from this answer.

总结：

它采用当前协议，省略主机名并将端口设置为零，这是无效的，应该被网络层杀死。

如果你有一个默认的图片来源，那么你可以简单地将ng-src设置为默认的src，而ng-src必须为空时，而不是清空ng-src。

Answer 9

 <img src="{{superImage}}" />

这可以按预期工作编辑：

其他工作可能是你可以使用和空字符串。

ng-click="superImage = ' '

让它变空。它不会触发404

空ng-src不会更新图像

9 个答案:

更新（2015年4月）

Original（2014年2月）