проверка jquery, если изображение существует в папке

Question

Я меняю источник изображения, используя следующий код:

var src = "/Content/Productimg/" + data.image +".jpg";
              $("#image").attr("src", src);

Однако, иногда, если data.img возвращает test, а test.jpg не существует в папке Productimg, отображается забавный значок.

Есть ли способ проверить, есть ли изображение перед назначением src?

Answer 1

Чтобы проверить, существует изображение или нет, вы можете сделать:

$.ajax({
    url:'http://yourhost/someimage.ext',
    type:'HEAD',
    error: function()
    {
        //file does not exist
    },
    success: function()
    {
        //file exists do something here
    }
});

Answer 2

$("#image").bind("error", function () {
    $(this).remove();
}).prop("src", src);

Если это вызывает ошибку (как в ошибке javascript), обновите jQuery или используйте sinful:

$("#image").bind("error", function () {
    $(this).remove();
}).attr("src", src);

Answer 3

Существует способ обработки ошибок в тегах IMG. Примерно так:

<img src="image.png" OnError="this.src='';"/>

Answer 4

Если вы создаете переменную javascript var image = new Image();, вы можете присоединить к ней обработчик события onload или onerror.Вы сможете узнать, является ли изменяемое вами изображение также недействительным, прежде чем его изменить.

function ChangeImage() {

    var image= new Image();
    image.onload = function() {
        alert('loaded');
    };
    image.onerror = function() {
        alert('error loading');
    };
    image.src = "http://BrokenPath/Sterling.jpg"
}

См. Этот пример скрипки

Answer 5

проверьте, существуют ли ваши изображения перед запуском js-скрипта, чтобы что-то вроде:

ОБНОВЛЕНО:

Предполагая, что data.image уже пришло от такого рода ответов json.

проверить, существует ли изображение перед его отправкой, if( !file_exists('image.jpg') { $data = array('images' => 'false', 'foo' => 'bar', ... ) }

, а затем при вызове $.ajax(); проверить, если data.image != 'false'

Answer 6

Вы можете проверить код состояния из запроса AJAX

$.ajax({
    url: '...',
    statusCode: {
        404: function() {
            alert('not found');
        }
    }
});

Answer 7

вы можете прикрепить обработчик к событию onerror