Wie man mit ng-src mit ungültiger URL in ng-repeat umgehen kann

Question

Ich möchte das Bild eines Benutzers zeigen, wenn ein Benutzer in meiner Objektliste (profileList) ist, und default/error als defaultProfile.png wenn nein Benutzer gefunden wird ({{item.userProfile}} null ist)

ich für ähnliche Ansätze gesucht wie

angularjs: ng-src equivalent for background-image:url(…)

und

empty ng-src doesn't update image

für dieses Problem Mein Ansatz ist:

<div ng-repeat="item in profileList"> 
    <div> 
    <img src='assets/img/defaultProfile.png' data-ng-src="http://example.com/{{item.userProfile}}.jpg" onerror="this.src='assets/img/defaultProfile.png'" /> 
    </div> 
<div> 

ich in der Lage bin jedoch Fehler Foto zu zeigen, dass ich noch Störung erhalte 500,

http://example.com/.jpg 500 (Internal Server Error)

GET

Wie vermeide ich http://example.com//.jpg?

Vielen Dank

Answer 1

Ein Ansatz ist ng-if und ng-hide zu verwenden:

<div ng-repeat="item in profileList"> 
    <div> 
    <img ng-if="item.userProfile" 
      data-ng-src="http://example.com/{{item.userProfile}}.jpg" /> 
    <img ng-hide="item.userProfile" 
      src="assets/img/defaultProfile.png" /> 
    </div> 
<div> 

Wenn item.userProfile vorhanden ist, zeigt die ng-src und den Standard sonst umgekehrt verbergen.

Answer 2

Es funktioniert.

ng-Show

egal laufen {{item.userProfile}} ist null oder nicht.

Durch das Ändern zu

ng-wenn

Im Folgenden Code funktioniert:

<div ng-repeat="item in profileList"> 
<div> 
<img ng-if="item.userProfile" 
     data-ng-src="http://example.com/{{item.userProfile}}.jpg" /> 
<img ng-if="item.userProfile == null" 
     src="assets/img/defaultProfile.png" /> 
</div> 

beachten Sie, dass mein Profile ist:

$scope.profileList = {userProfile = null} 

Vielen Dank

Answer 3

Ihre aktuelle Ausgabe ng-src ist immer noch auf eine ungültige URL zusammengestellt und ausgewertet, wenn userProfile nicht definiert ist.

Eine einfache Lösung ist ternären zu verwenden und prüfen, ob userProfile vor mit url entscheiden sollte gemacht werden:

<img ng-src="{{ item.userProfile ? 'http://example.com/' + item.userProfile + '.jpg'}} : 'assets/img/defaultProfile.png'" /> 

Es wird garantiert, dass Sie immer das Standardbild holen, es sei denn item.userProfile verfügbar ist.