ถ้าเส้นทาง ngSrc เปลี่ยนเป็น 404 มีวิธีเปลี่ยนกลับเป็นค่าเริ่มต้นหรือไม่?

แอปพลิเคชันที่ฉันกำลังสร้างต้องการให้ผู้ใช้ตั้งค่าข้อมูล 4 ชิ้นก่อนที่ภาพนี้จะมีโอกาสโหลดได้ รูปภาพนี้เป็นชิ้นส่วนกึ่งกลางของแอปพลิเคชันดังนั้นลิงก์รูปภาพที่เสียจึงทำให้ดูเหมือนว่าสิ่งทั้งหมดถูกบอร์ก ฉันต้องการให้มีภาพอื่นแทนบน 404

ความคิดใด ๆ ? ฉันต้องการหลีกเลี่ยงการเขียนคำสั่งที่กำหนดเองสำหรับสิ่งนี้

ฉันแปลกใจที่ไม่พบคำถามที่คล้ายกันโดยเฉพาะอย่างยิ่งเมื่อคำถามแรกในเอกสารเป็นคำถามเดียวกัน!

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

เป็นคำสั่งที่ค่อนข้างง่ายในการตรวจสอบข้อผิดพลาดในการโหลดรูปภาพและแทนที่ src (Plunker)

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 ว่างคุณสามารถเพิ่มสิ่งนี้(Plunker) :

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

ปัญหาคือ ngSrc ไม่อัปเดตแอตทริบิวต์ src หากค่าว่างเปล่า

ไปงานปาร์ตี้ช้าไปหน่อยแม้ว่าฉันจะหาวิธีแก้ปัญหาเดียวกันไม่มากก็น้อยในระบบที่ฉันกำลังสร้าง

ความคิดของฉันคือจัดการimgแท็กรูปภาพทุกรูปแบบทั่วโลก

ฉันไม่ต้องการพริกไทยHTMLด้วยคำสั่งที่ไม่จำเป็นเช่นerr-srcที่แสดงไว้ที่นี่ บ่อยครั้งโดยเฉพาะอย่างยิ่งกับภาพไดนามิกคุณจะไม่รู้ว่ามันหายไปหรือไม่จนกว่าจะสายเกินไป การเพิ่มคำสั่งพิเศษในกรณีที่ไม่มีโอกาสที่รูปภาพจะหายไปดูเหมือนจะเกินความจำเป็นสำหรับฉัน

แต่ฉันขยายimgแท็กที่มีอยู่- ซึ่งจริงๆแล้วคือสิ่งที่คำสั่งเชิงมุมเป็นข้อมูลเกี่ยวกับ

นี่คือสิ่งที่ฉันคิดขึ้นมา

หมายเหตุ : สิ่งนี้ต้องการไลบรารี JQuery แบบเต็มเพื่อนำเสนอไม่ใช่แค่ JQlite Angular ที่มาพร้อมกับเพราะเรากำลังใช้.error()

คุณสามารถดูการทำงานได้ที่Plunkerนี้

คำสั่งมีลักษณะเช่นนี้:

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 เพื่อแสดงรูปภาพแทน

ตอนนี้ทุกภาพโดยไม่คำนึงถึงการใช้งาน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 หรือรูปภาพว่างเปล่าสิ่งที่ไม่จำเป็นต้องมีคำสั่งคุณสามารถใช้ตัวกรอง 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 ที่ถูกต้องอย่างชัดเจนเพื่อแสดง ณ เวลาใดเวลาหนึ่ง

ฉันขอแนะนำว่าคุณอาจต้องการใช้คำสั่ง 'if statement' ของ Angular UI Utils เพื่อแก้ปัญหาของคุณดังที่พบในhttp://angular-ui.github.io/ 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 มีเส้นทางไปยังภาพตัวยึดหรือใช้เพียงsrcแท็กตาม HTML ปกติ

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

เห็นได้ชัดว่าตัวอย่างโค้ดทั้งหมดข้างต้นสมมติว่าแต่ละค่า 1 ค่า 2 ค่า 3 และค่า 4 จะเท่ากับnull/ falseเมื่อข้อมูลทั้ง 4 ชิ้นของคุณไม่สมบูรณ์ (และเป็นค่าบูลีนด้วยtrueเมื่อเสร็จสมบูรณ์)

PS เมื่อเร็ว ๆ นี้โครงการ AngularUI ถูกทำลายในโครงการย่อยและเอกสารสำหรับui-ifดูเหมือนจะหายไปในขณะนี้ (อาจอยู่ในแพ็คเกจที่ใดที่หนึ่ง) อย่างไรก็ตามมันค่อนข้างตรงไปตรงมาที่จะใช้อย่างที่คุณเห็นและฉันได้บันทึก 'ปัญหา' ของ Github ในโครงการ Angular UI เพื่อชี้ให้ทีมเห็นด้วย

อัปเดต: 'ui-if' หายไปจากโครงการ AngularUI เนื่องจากถูกรวมเข้ากับรหัส AngularJS หลัก! เฉพาะตั้งแต่ v1.1.x เท่านั้นซึ่งปัจจุบันถูกทำเครื่องหมายว่า 'ไม่เสถียร'

นี่คือวิธีแก้ปัญหาที่ฉันคิดขึ้นโดยใช้จาวาสคริปต์ดั้งเดิม ฉันกำลังตรวจสอบว่ารูปภาพเสียหรือไม่จากนั้นเพิ่มคลาสให้กับรูปภาพในกรณีและเปลี่ยนแหล่งที่มา

ฉันได้รับคำตอบส่วนหนึ่งจากคำตอบ 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 อยู่หรือไม่โดยใช้ 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);
                }              
            });
            }
        }
    }
})();