remove（）在img与ng-src，边界保持？ [英] remove() on img with ng-src, border remains?

问题描述

我有一些ng重复的图片。

 < img ng-src ={{:: data.image }}/> 
  

css：

 code> .thumbnailImage {
 width：auto; 
 max-width：20px; 
 height：auto; 
 max-height：20px; 
 border：1px solid lightslategrey; 
 position：relative; 
 display：block; 
 margin-left：auto; 
 margin-right：auto; 
 background-color：white; / *在png的情况下* / 
} 
  

{{data.image}}中的一些为null。我想删除这些。

 < img ng-src ={{:: data.image}}onerror = this.remove（）/> 
  

但是当我这样做时，图像上的1px边框仍然存在？

之前，我有一个ng-if语句（ng-src！= null），但我发现，在角度观察者太贵了。

https://jsfiddle.net/8ykrkc3c/

 <$ c $> 
解决方案
 c>< div ng-if =data.image> 
< img ng-src ={{:: data.image}}/> 
< / div> 
   
 
 
 
 编辑：
 
 
 
您可以为此使用custome dirctive。
 
 
 
 
 
 
  angular.module（app，[]）.controller（MainCtrl， function（$ scope）{$ scope.value =https://www.google.co.in/images/srpr/logo11w.png; // $ scope.value =null;}）.directive（' custSrc'，function（）{return {restrict：A，scope：{value：= custSrc}，link：function（scope，element，attrs）{if（scope.value =='null'）element。 parent（）。addClass（'hide'）; else element.attr（'src'，scope.value）; console.log（element）;}};}）;  
 
  .hide {display：none; }  
 
 < script src =https：// ajax .googleapis.com / ajax / libs / angularjs / 1.2.23 / angular.min.js>< / script> < div ng-app =appng-controller =MainCtrl> < img cust-src =value/> < / div>  
 
 
 
 
I have some ng-repeated images.
<img ng-src="{{::data.image}}" />
css:
.thumbnailImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  border: 1px solid lightslategrey;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white; /* in case of png */
  }



Some of {{data.image}} is null. I want to remove those.
<img ng-src="{{::data.image}}" onerror="this.remove()" />
However when i do this the 1px border i have on the images still remains?

before this i had a ng-if statement (ng-src != null), but i found out that was too expensive in angular watchers. 

https://jsfiddle.net/8ykrkc3c/
解决方案
try this
<div ng-if="data.image">
   <img  ng-src="{{::data.image}}"  />
</div>
Edit:

you can use custome dirctive for this.



angular.module("app", [])
  .controller("MainCtrl", function($scope) {
    $scope.value = "https://www.google.co.in/images/srpr/logo11w.png";
  //  $scope.value = "null";
  })
  .directive('custSrc', function() {
    return {
      restrict: "A",
      scope: {
        value: "=custSrc"
      },
      link: function(scope, element, attrs) {
          if(scope.value == 'null')
             element.parent().addClass('hide'); 
          else
            element.attr('src', scope.value);
        
        console.log(element);

      }
    };
  });

.hide{
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="app" ng-controller="MainCtrl">
   <img  cust-src="value" />
 </div>





                        
这篇关于remove（）在img与ng-src，边界保持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！