Angularjs 空ng src不'；更新图像

我使用的是ng src指令，以避免浏览器在计算表达式之前请求图像

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

ng src={{image}

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

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

这是一个

谢谢

把它弄空。它不会触发404更新（2015年4月） 请参阅developering的答案，显然我最初建议的这种方法可能不适用于所有浏览器

---

原件（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>

删除叠加图像

---

那么就不需要这个函数了。虽然我认为函数法更好。

答案在角度代码中。这不是一个bug，这只是他们决定想要的行为。从第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]);
       });
     }
    };
  };
});

关键在于：

如果（！value）返回

如您所见，如果将ng src表达式更改为空字符串，则不会更改实际的src值。您可以按照MadScone的建议来解决这个问题。
通过设置值“”来修复它；
使用空格

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

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

这里已经讨论了真正的原因：
另一种简单的解决方法：
MadScone的建议是一个很酷的想法，但它并不适用于所有浏览器。我最后只是在src不为空时才显示元素：

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


您可以选择任何适合您的网站的1x1px图像，并替换您自己的图像。对于我的网站，我使用上的可用图像

p/S：无需担心img标签的原始src属性，因为它不影响图像模型
ng hide和ng show可以帮助您解决此问题



$scope.Image=null

或



$scope.Image=''
 可以找到清空
ng src
的可能解决方法



可以找到使用
/:0
的详细说明

总结如下：

它采用当前协议，省略主机名并将端口设置为零，这是无效的，应由网络层终止

另外，如果您有默认图像源，则不必清空
ng src
，只要在
ng src
必须为空时将
ng src
设置为默认src即可。
这取决于您如何设置值。您需要在此处共享一些代码。使用src属性将在计算表达式superImage之前触发请求，这将导致找不到404。问题是，他们为什么选择这样的行为。它使图像元素处于不一致状态。当模型为空时显示图像。嗯，我不确定他们在这个决定背后的想法。我想的是：嗯，我不确定他们在这个决定背后的想法。我的想法是：根据，src必须是一个非空URL，可能被空格包围，才能有效。但更重要的是，正如您在这里看到的，一个空的src可能会导致多个问题。也许这就是他们想要阻止的。好的，谢谢你的链接！我对空的src不太了解。无论如何，@MadScone trick是一个很好的解决方法！在自定义指令（data custom src）中添加这个技巧很有诱惑力，您还可以使用jQuery直接设置图像src。不确定它对后续jQuery摘要周期的影响有多大这是一个很酷的想法，在一些浏览器中对我有效，但不是在所有浏览器中都有效。主要问题是“/：0”实际上并不适用于任何地方。我添加了另一个答案，这个答案应该是全面的。@developering足够公平了。我已经更新了我的答案，以供将来可能不会阅读所有答案或错过您评论的任何毫无戒心的人使用。对我来说，这已经做到了，因为ng show的计算结果是bool，空字符串和null将变成false。我也得出了同样的结论，使用ng show是解决问题的更好方法。我实际上使用了ng if，但解决方案的概念是相同的。这已经很晚了，但是@enpenax有一个很好的观点。空字符串是falsy，因此！==完全没有必要。我会更新这些信息。
img[src="_"]
    display none !important

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

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

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