ตรวจจับเมื่อภาพไม่สามารถโหลดใน Javascript

มีวิธีตรวจสอบว่าเส้นทางรูปภาพนำไปสู่รูปภาพจริงหรือไม่เช่นตรวจจับเมื่อรูปภาพไม่สามารถโหลดใน Javascript

สำหรับเว็บแอปฉันกำลังแยกวิเคราะห์ไฟล์ xml และสร้างภาพ HTML แบบไดนามิกจากรายการเส้นทางรูปภาพ เส้นทางรูปภาพบางส่วนอาจไม่มีอยู่บนเซิร์ฟเวอร์อีกต่อไปดังนั้นฉันจึงต้องการล้มเหลวอย่างสง่างามโดยการตรวจจับว่ารูปภาพใดโหลดไม่สำเร็จและลบองค์ประกอบ HTML img นั้น

หมายเหตุโซลูชัน JQuery จะไม่สามารถใช้ได้ (เจ้านายไม่ต้องการใช้ JQuery ใช่ฉันรู้ว่าฉันไม่ได้เริ่มต้น) ฉันรู้วิธีใน JQuery ในการตรวจจับเมื่อโหลดรูปภาพ แต่ไม่ว่าจะล้มเหลวหรือไม่

รหัสของฉันในการสร้างองค์ประกอบ img แต่ฉันจะตรวจสอบได้อย่างไรว่าเส้นทาง img นำไปสู่การโหลดภาพล้มเหลว

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

คุณสามารถลองใช้รหัสต่อไปนี้ ฉันไม่สามารถรับรองความเข้ากันได้ของเบราว์เซอร์ดังนั้นคุณจะต้องทดสอบ

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

และความเห็นอกเห็นใจของฉันสำหรับเจ้านายที่ทน jQuery!

คำตอบนั้นดี แต่แนะนำปัญหาหนึ่ง เมื่อใดก็ตามที่คุณมอบหมายonloadหรือonerrorโดยตรงอาจแทนที่การเรียกกลับที่ได้รับมอบหมายก่อนหน้านี้ นั่นคือเหตุผลที่มีวิธีที่ดีที่"ลงทะเบียนผู้ฟังที่ระบุบน EventTarget ก็เรียกว่า" การที่พวกเขาพูดเกี่ยวกับMDN คุณสามารถลงทะเบียนผู้ฟังได้มากเท่าที่คุณต้องการในกิจกรรมเดียวกัน

ให้ฉันเขียนคำตอบใหม่สักหน่อย

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

เนื่องจากกระบวนการโหลดทรัพยากรภายนอกเป็นแบบอะซิงโครนัสจึงเป็นการดีกว่าที่จะใช้ JavaScript ที่ทันสมัยกับสัญญาดังต่อไปนี้

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

นี้:

<img onerror="this.src='/images/image.png'" src="...">

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

jQuery + CSS สำหรับ img

ด้วย jQuery สิ่งนี้ใช้ได้กับฉัน:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

และฉันสามารถใช้รูปภาพนี้ได้ทุกที่บนเว็บไซต์โดยไม่คำนึงถึงขนาดของรูปภาพด้วยคุณสมบัติ CSS3 ต่อไปนี้:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

เคล็ดลับ 1: ใช้ภาพสี่เหลี่ยมจัตุรัสอย่างน้อย 800 x 800 พิกเซล

เคล็ดลับ 2: สำหรับใช้กับภาพบุคคลให้ใช้object-position: 20% 50%;

CSS สำหรับ background-img เท่านั้น

สำหรับภาพพื้นหลังที่หายไปฉันได้เพิ่มสิ่งต่อไปนี้ในbackground-imageการประกาศแต่ละครั้ง:

background-image: url('path-to-image.png'), url('no-img.png');

หมายเหตุ: ไม่ทำงานกับภาพโปร่งใส

ฝั่งเซิร์ฟเวอร์ Apache

อีกวิธีหนึ่งคือการตรวจจับภาพที่หายไปด้วย Apache ก่อนที่จะส่งไปที่เบราว์เซอร์และจัดวางใหม่ตามค่าเริ่มต้นของเนื้อหาที่ไม่มี img.png

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

ต่อไปนี้เป็นฟังก์ชั่นที่ผมเขียนคำตอบอื่น: จาวาสคริ URL ของภาพที่ตรวจสอบ ผมไม่ทราบว่ามันเป็นสิ่งที่คุณต้องการ แต่จะใช้เทคนิคต่างๆที่คุณจะใช้ซึ่งรวมถึงการขนย้ายวัสดุสำหรับonload, onerror, onabortและหมดเวลาทั่วไป

เนื่องจากการโหลดรูปภาพเป็นแบบอะซิงโครนัสคุณจึงเรียกใช้ฟังก์ชันนี้กับรูปภาพของคุณจากนั้นจะเรียกใช้การโทรกลับของคุณในภายหลังพร้อมกับผลลัพธ์

เช่นเดียวกับด้านล่าง:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}