Bildelement nur anzeigen, wenn Bild in Winkel vorhanden ist

Ich habe zwei Geschwisterelemente. Eins ist Bild und anderes ist ein Div. Ich möchte Bildelement anzeigen, wenn Bild vorhanden ist und div-Element anzeigen, wenn Bild nicht existiert. Meine Elemente sieht aus wieBildelement nur anzeigen, wenn Bild in Winkel vorhanden ist

<img ng-show="product.img" ng-src="{{product.img}}" /> 
<div class="left margin-right-1 line-height-15" ng-hide="product.img">{{product.img}}</div>

Und product.img Ergebnisse in so etwas wie /assets/images/prod.jpg. Da dies eine Zeichenkette ist, wird ng-show immer wahr sein und Bild-Tags werden angezeigt. Wenn das Bild also nicht existiert, wird es als gebrochenes Bild angezeigt. Also im Grunde, was ich will ist, wenn Bild nicht existiert, Bild-Tag versteckt und Div wird gezeigt und umgekehrt.

Ich habe eine Javascript-Funktion versucht, wie

$scope.imageExists = function(src) { 
    var image = new Image(); 
    image.src = src; 
    if (image.width == 0) { 
     return false; 
    } else { 
     return true; 
    } 
}

Und änderte mein Bild-Tag wie

<img ng-show="product.img" ng-src="{{imageExists(product.img)}}" />

Aber das ist sehr teuer. Ich habe 100 Produkte pro Seite und wenn es alle Bilder durchläuft, wird die Seite sehr, sehr langsam.

So kann mir jeder Körper zeigen, was ist der beste Weg in Winkel zu zeigen und zu verbergen Bildelement, wenn Bild existiert oder nicht.

Quelle

2016-04-29 Awais Qarni

Sie könnten versuchen-ng, wenn anstatt ng-Show. ng-wenn es aus dem Dom entfernt wird. Ich kann jedoch nicht sagen, welche Leistungsverbesserungen dies jedoch machen wird. – Rob

Warum kann 'product.img === null' oder' undefined' nicht angegeben werden, wenn kein Bild vorhanden ist? – Kyle

'ng-if' überprüft nicht, ob ein Bild existiert oder nicht. Ich möchte prüfen, ob ein Bild vorhanden ist oder nicht –

Verwenden onError Ereignis im Bild, um die Variable zu deaktivieren, die in ng-show

<img ng-show="product.img" ng-src="{{product.img}}" onError="angular.element(this).scope().product.img = false"/>

Quelle

2016-04-29 14:40:19

Es heißt 'Produkt nicht definiert' –

Ja, Sie müssen aufrufen, beziehen sich auf die Variable Umfang. Antwort aktualisiert –

Es funktionierte genau wie benötigt –

du eine Richtlinie individuelle Verwendung kann erreichen verwendet wird. Siehe Plunker: http://plnkr.co/edit/yBb0rNiXIaO4EGTqCAmm?p=preview

Sie benötigen einen is404 jedem Ihrer Bild anbringt:

for(var i = 0; i < products.length; ++i) { 
    products[i].image.is404 = false; 
}

Dann zeigt sie an. Sie müssen $index als Indexattribut übergeben, damit Sie es in Ihrer Anweisung verwenden können.

<img ng-if="!image.is404" on-src-error index="{{$index}}" src="{{image.image}}" /> 
<div ng-if="image.is404">Uh oh! Image 404'd.</div>

Benutzerdefinierte Richtlinie:

app.directive("onSrcError", function() { 
    return { 
    link: function(scope, element, attrs) { 
    element.bind('error', function() { 
     //set 404 to true and apply the scope 
     scope.images[attrs.index].is404 = true; 
     scope.$apply(); 
    }); 
    } 
    }; 
});

Quelle

2016-04-29 14:46:33 Kyle

Ich möchte kein anderes leeres Bild zeigen. Ich möchte es verstecken und anderes Element zeigen –

@AwaisQarni Siehe meine Bearbeitung. Hoffe das funktioniert für dich. – Kyle

Diese oben genannten Lösungen sind gut. Aber ich schlage vor, Sie setzen onError Ereignislogik in eine Direktive und verwenden ng-if, um die Sichtbarkeit zu kontrollieren.

var myApp = angular.module('myApp', []) 
 

 
.directive('img', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     ngModel: '=' 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
     element.bind('error', function() { 
 
     scope.ngModel.shown = false; 
 
     scope.$apply(); 
 
     }); 
 
    } 
 
    } 
 
}) 
 

 
.controller('MyController', function($scope) { 
 
    $scope.images = []; 
 
    for (var i = 0; i < 10; i++) { 
 
    if (i == 5) { 
 
     $scope.images[i] = { 
 
     url: 'http://www.notfound.com.fr/404.png' 
 
     }; 
 
     continue; 
 
    } 
 
    $scope.images.push({ 
 
     url: 'https://unsplash.it/50/50/?random=' + i 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <title></title> 
 
</head> 
 

 
<body ng-app="myApp" class="ng-scope"> 
 
    <div ng-controller="MyController"> 
 
    <div ng-repeat="image in images" ng-init="image.shown=true"> 
 
     <p ng-if="!image.shown"> 
 
     Empty image here... 
 
     </p> 
 
     <img ng-model="image" ng-if="image.shown" ng-src="{{ image.url }}"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-04-29 15:34:18 micmia

Bildelement nur anzeigen, wenn Bild in Winkel vorhanden ist

Antwort

Verwandte Themen