Kiểm tra nếu hình ảnh không tồn tại sử dụng javascript

Question

thể trùng lặp:
Check if image exists with given url using jquery
Change image source if file exists

Tôi ném giá trị của một con đường hình ảnh từ một textbox vào boxvalue và muốn xác nhận nếu hình ảnh tồn tại bằng javascript.

var boxvalue = $('#UrlQueueBox').val(); 

Tôi duyệt luồng ngăn xếp và tìm thấy bên dưới để có chiều rộng/chiều cao hình ảnh, nhưng không muốn sử dụng.

var img = document.getElementById('imageid'); 

Làm cách nào để xác thực nếu đó thực sự là hình ảnh từ đường dẫn hình ảnh?

Answer 1

// The "callback" argument is called with either true or false 
// depending on whether the image at "url" exists or not. 
function imageExists(url, callback) { 
    var img = new Image(); 
    img.onload = function() { callback(true); }; 
    img.onerror = function() { callback(false); }; 
    img.src = url; 
} 

// Sample usage 
var imageUrl = 'http://www.google.com/images/srpr/nav_logo14.png'; 
imageExists(imageUrl, function(exists) { 
    console.log('RESULT: url=' + imageUrl + ', exists=' + exists); 
}); 

Answer 2

Bạn có thể tạo hàm và kiểm tra thuộc tính complete.

function ImageExists(selector) { 
    var imageFound = $(selector); 

    if (!imageFound.get(0).complete) { 
     return false; 
    } 
    else if (imageFound.height() === 0) { 
     return false; 
    } 

    return true; 
} 

và gọi funciton này

var exists = ImageExists('#UrlQueueBox'); 

Cùng chức năng với các url thay vì một selector như tham số (trường hợp của bạn):

function imageExists(url){ 

    var image = new Image(); 

    image.src = url; 

    if (!image.complete) { 
     return false; 
    } 
    else if (image.height === 0) { 
     return false; 
    } 

    return true; 
}