ngSrc 경로가 404로 해결된 경우 기본값으로 폴백하는 방법이 있습니까?

ngSrc 경로가 404로 해결된 경우 기본값으로 폴백하는 방법이 있습니까?

제가 만들고 있는 어플리케이션에서는 사용자가 이 이미지를 로드하기 전에 4개의 정보를 설정해야 합니다.이 이미지는 어플리케이션의 중심 부분이기 때문에 이미지 링크가 파손되어 있기 때문에 전체가 볼록한 것처럼 보입니다.404에서 다른 이미지를 사용하고 싶습니다.

좋은 생각 있어요?커스텀 디렉티브를 작성하는 것은 피하고 싶습니다.

저는 비슷한 질문을 찾을 수 없어서 놀랐어요, 특히 문서의 첫 번째 질문이 같은 질문일 때!

http://docs.angularjs.org/api/ng.directive:ngSrc

이미지 로딩 오류를 감시하고 src를 교체하는 것은 매우 간단한 지시입니다.(플런커)

HTML:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

Javascript:

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set('src', attrs.errSrc);
        }
      });
    }
  }
});

ngSrc가 공백일 때 오류 이미지를 표시하는 경우 다음(플런커)을 추가할 수 있습니다.

attrs.$observe('ngSrc', function(value) {
  if (!value && attrs.errSrc) {
    attrs.$set('src', attrs.errSrc);
  }
});

문제는 값이 공백일 경우 ngSrc는 src 속성을 업데이트하지 않는다는 것입니다.

파티에 늦었지만, 제가 구축 중인 시스템에서 거의 같은 문제에 대한 해결책을 생각해 냈습니다.

image( 이미지)를 처리하는 img이치노

후추를 뿌리고 싶진 않았어요HTML: 지시)err-src여기에 표시되어 있습니다.특히 동적인 이미지의 경우, 너무 늦어질 때까지 분실 여부를 알 수 없는 경우가 많습니다.우연히 이미지가 없어진다면 지시문을 추가하는 것은 무리인 것 같습니다.

대신, 나는 기존 시스템을 확장합니다.img- 입니다.tag - 이 directive directive directive directive의의의의의의의의의의의의의의의의의의의의의의의의의의의.

그래서 생각해낸 게 이거야

주의: JQuery 라이브러리가 모두 존재해야 합니다.JQLite Angular 뿐만 아니라.error()

이 플런커에서는 동작하고 있는 것을 보실 수 있습니다.

지시문은 거의 다음과 같습니다.

app.directive('img', function () {
    return {
        restrict: 'E',        
        link: function (scope, element, attrs) {     
            // show an image-missing image
            element.error(function () {
                var w = element.width();
                var h = element.height();
                // using 20 here because it seems even a missing image will have ~18px width 
                // after this error function has been called
                if (w <= 20) { w = 100; }
                if (h <= 20) { h = 100; }
                var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=Oh No!';
                element.prop('src', url);
                element.css('border', 'double 3px #cccccc');
            });
        }
    }
});

에러가 발생했을 경우(이미지가 존재하지 않거나 도달할 수 없는 경우 등), 캡처하여 대응합니다.이미지 크기가 이미지/스타일에 있는 경우 이미지 크기를 가져올 수도 있습니다.그렇지 않은 경우 기본값을 설정하십시오.

이 예에서는, 대신에 표시하는 이미지에 placehold.it 를 사용하고 있습니다.

image(모든 이미지)를 사용해도 상관없습니다.src ★★★★★★★★★★★★★★★★★」ng-src짐을 싣지 않을 경우를 대비해서 덮개를 씌웠죠

Jason 솔루션을 확장하여 로드 오류와 빈 소스 문자열의 두 가지 경우를 모두 파악하려면 워치를 추가하면 됩니다.

HTML:

<img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />

Javascript:

var app = angular.module("MyApp", []);

app.directive('errSrc', function() {
  return {
    link: function(scope, element, attrs) {

      var watcher = scope.$watch(function() {
          return attrs['ngSrc'];
        }, function (value) {
          if (!value) {
            element.attr('src', attrs.errSrc);  
          }
      });

      element.bind('error', function() {
        element.attr('src', attrs.errSrc);
      });

      //unsubscribe on success
      element.bind('load', watcher);

    }
  }
});

App.directive('checkImage', function ($q) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$observe('ngSrc', function (ngSrc) {
                var deferred = $q.defer();
                var image = new Image();
                image.onerror = function () {
                    deferred.resolve(false);
                    element.attr('src', BASE_URL + '/assets/images/default_photo.png'); // set default image
                };
                image.onload = function () {
                    deferred.resolve(true);
                };
                image.src = ngSrc;
                return deferred.promise;
            });
        }
    };
});

HTML:

<img class="img-circle" check-image ng-src="{{item.profileImg}}" />

이미지가 404이거나 이미지가 null로 비어 있는 경우 ng-src 필터는 다음과 같이 사용할 수 있습니다.

<img ng-src="{{ p.image || 'img/no-image.png' }}" />

저는 이런 걸 쓰는데 team.logo가 유효하다고 가정합니다."team.logo"가 설정되지 않았거나 비어 있으면 강제로 기본값이 지정됩니다.

<img ng-if="team.logo" ng-src="https://api.example.com/images/{{team.logo}}">
<img ng-hide="team.logo" ng-src="img/default.png">

각도도 필요 없고 CSS나 JS도 필요 없습니다.필요에 따라서, 이 회답(링크)을 심플한 지시로 정리할 수 있습니다만, 매우 간단한 프로세스입니다.그냥 오브젝트 태그로 싸서...

CSS/HTML만 사용하여 이미지 파손 아이콘을 숨기는 방법(js 없음)

코드에 폴백 이미지를 선언할 수 없는 특별한 이유가 있습니까?

이미지 소스에는 다음 두 가지 사례가 있을 수 있습니다.

1. 정보 < 4 = 폴백이미지를 올바르게 설정.
2. 올바른 정보 설정 == 4 = 생성된 URL 입니다.

현재 올바른 URL을 확인할 수 없는 경우에는 로드/폴백/플레이스홀더 이미지 URL을 전달해 주세요.

그 이유는, 어느 시점에서 표시할 올바른 URL을 명시적으로 선언하고 있기 때문에, 「누락」이미지가 없는 경우는 없습니다.

Angular UI Utils 'if statement' 디렉티브를 사용하여 문제를 해결하는 것이 좋습니다(http://angular-ui.github.io/ 참조).나는 단지 그것을 정확히 같은 일을 하기 위해 사용했다.

이것은 테스트되지 않았지만 다음과 같은 작업을 수행할 수 있습니다.

컨트롤러 코드:

$scope.showImage = function () {
    if (value1 && value2 && value3 && value4) { 
        return true;
    } else {
        return false;
    }
};

(또는 단순)

$scope.showImage = function () {
    return value1 && value2 && value3 && value4;
};

HTML 기기:<img ui-if="showImage()" ng-src="images/{{data.value}}.jpg" />

또는 단순히 스코프 속성을 사용할 수도 있습니다.

컨트롤러 코드:

$scope.showImage = value1 && value2 && value3 && value4;

HTML 기기:<img ui-if="showImage" ng-src="images/{{data.value}}.jpg" />

이미지의 와 유사한 이미지를 더 합니다.<img> 단, 에 「」, 「」를 .ui-if!마크를 대한 하거나,ngSrc를 합니다.srcol' 태그를 합니다.

<img ui-if="!showImage" src="images/placeholder.jpg" />

value1, 및 value1, value2, value3 value4에 상당하는 로 하고 .nullfalse때까지)true(완료되면)

추신. 앵글UI 프로젝트는 최근 서브프로젝트로 분할되었으며,ui-if현재 분실된 것 같습니다(아마도 패키지 어딘가에 있을 것입니다).다만, 보시는 바와 같이 사용하기는 매우 간단하며, 팀에게도 지적하기 위해 Angular UI 프로젝트에 Github의 'issue'를 기록하고 있습니다.

업데이트: Angular에 'ui-if'가 없습니다.UI 프로젝트는 코어 Angular에 통합되어 있기 때문에JS코드!단, 현재 '불안정'으로 표시되어 있는 것은 v1.1.x 시점뿐입니다.

네이티브 Javascript를 사용하여 생각해 낸 해결 방법이 있습니다.이미지가 파손되지 않았는지 확인하고 만약을 위해 이미지에 클래스를 추가하고 소스를 변경합니다.

Quora의 답변 http://www.quora.com/How-do-I-use-JavaScript-to-find-if-an-image-is-broken에서 답변의 일부를 받았습니다.

app.directive('imageErrorDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element[0].onerror = function () {
                element[0].className = element[0].className + " image-error";
                element[0].src = 'http://img3.wikia.nocookie.net/__cb20140329055736/pokemon/images/c/c9/702Dedenne.png';
            };
        }
    }
});

나만의 해결책을 생각해냈지src 또는 ngSrc가 비어 있는 경우 및 img가 404를 반환하는 경우 모두 이미지를 대체합니다.

(@Darren 솔루션의 포크)

directive('img', function () {
return {
    restrict: 'E',        
    link: function (scope, element, attrs) {   
        if((('ngSrc' in attrs) && typeof(attrs['ngSrc'])==='undefined') || (('src' in attrs) && typeof(attrs['src'])==='undefined')) {
            (function () {
                replaceImg();
            })();
        };
        element.error(function () {
            replaceImg();
        });

        function replaceImg() {
            var w = element.width();
            var h = element.height();
            // using 20 here because it seems even a missing image will have ~18px width 
            // after this error function has been called
            if (w <= 20) { w = 100; }
            if (h <= 20) { h = 100; }
            var url = 'http://placehold.it/' + w + 'x' + h + '/cccccc/ffffff&text=No image';
            element.prop('src', url);
        }
    }
}
});

그러면 ng-src가 존재하지 않는지 확인하기 위해 2회만 루프할 수 있습니다.그렇지 않으면 err-src를 사용하여가 루프를 계속하지 않도록 합니다.

(function () {
    'use strict';
    angular.module('pilierApp').directive('errSrc', errSrc);

    function errSrc() {
        return {
            link: function(scope, element, attrs) {
             element.error(function () {
                // to prevent looping error check if src == ngSrc
                if (element.prop('src')==attrs.ngSrc){
                     //stop loop here
                     element.prop('src', attrs.errSrc);
                }              
            });
            }
        }
    }
})();

이것은 문제에 대한 해결책입니다.고객님의 컴포넌트에서 이 작업을 수행합니다.html

<img [src]="imageUrl" (error)="handleError()">

component.ts 파일에 저장하다

defaultImageUrl = '/assets/default-image.png';
imageUrl = 'https://example.com/actual-image.png';

component.ts 파일 내에 함수를 만듭니다.

handleError() {
   this.imageUrl = this.defaultImageUrl;
}

이것은 당신의 문제를 해결해 줄 것이다.

언급URL : https://stackoverflow.com/questions/16310298/if-a-ngsrc-path-resolves-to-a-404-is-there-a-way-to-fallback-to-a-default