ng-repeat에서 잘못된 URL을 사용하여 ng-src를 처리하는 방법

Question

내 개체 목록 (profileList)에 사용자가있는 경우 사용자의 사진을 표시하고 싶을 때 default/error를 defaultProfile.png로 표시합니다. 사용자는 나는 그런

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

및

empty ng-src doesn't update image

와 유사한 방식 검색 한

({{item.userProfile가}}가 null) 발견 이 문제에 대한

내 방식이다 : 나는 그러나 나는 아직도 오류 500를 얻고 오류 사진을 보여줄 수 있어요

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

,

이 http://example.com/.jpg 500 (내부 서버 오류)

을 GET

http://example.com//.jpg을 피하는 방법?

감사

Answer 1

한 가지 방법은 ng-if 및 ng-hide를 사용하는 많은 :

item.userProfile이 존재

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

의 ng-src을 표시하고, 그렇지 않으면 그 반대의 경우도 마찬가지 기본값을 숨 깁니다.

Answer 2

작동합니다.

겨 쇼

상관없이 실행됩니다 {{item.userProfile}}이 null 또는 없습니다. 로 변경하여

코드 아래

가 작동

NG-경우 :

: 내 profileList은

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

노트

감사 userProfile이 정의되지 않은 경우 현재 문제가 ng-src입니다

Answer 3

여전히 잘못된 URL로 컴파일 및 평가를 많이.그것은 item.userProfile가 가능하지 않은 경우, 당신은 항상 기본 이미지를 가져올 것이라는 점을 보장합니다

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

:

간단한 해결책은 삼항 사용하고 렌더링해야 URL로 결정하기 전에 userProfile를 확인하는 것입니다.