Как показать альтернативное изображение, если исходное изображение не найдено? (onerror работает в IE, но не в mozilla)

Мне нужно показать альтернативное изображение в ячейке таблицы, если исходное изображение не найдено. В настоящее время для этого используется код ниже.

cell.innerHTML="<img height=40 width=40 src='<%=request.getContextPath()%>/writeImage.htm' onError='ImgErrorVideo(this);'>" 
function ImgErrorVideo(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
}

Теперь проблема в том, что вышеприведенное решение работает в Internet Explorer, а не в Mozilla.

Пожалуйста, скажите мне какое-нибудь решение, которое работает во всех браузерах.

Ответ 1

Я думаю, что это очень приятно и коротко

<img src="imagenotfound.gif" alt="Image not found" onerror="this.src='imagefound.gif';" />

Но будьте осторожны. Пользовательский браузер будет застрял в бесконечном цикле, если сам объект onerror генерирует ошибку.

ИЗМЕНИТЬ Чтобы избежать бесконечного цикла, сразу удалите onerror.

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

Вызывая this.onerror=null, он удаляет onerror, а затем пытается получить альтернативное изображение.

NEW Я хотел бы добавить способ jQuery, если это может кому-то помочь.

<script>
$(document).ready(function()
{
    $(".backup_picture").on("error", function(){
        $(this).attr('src', './images/nopicture.png');
    });
});
</script>

<img class='backup_picture' src='./images/nonexistent_image_file.png' />

Вам просто нужно добавить class= 'backup_picture' к любому тегу img, который вы хотите загрузить резервную картинку, если он пытается показать плохое изображение.

Ответ 2

У меня есть решение для моего запроса:

Я сделал что-то вроде этого:

cell.innerHTML="<img height=40 width=40 alt='' src='<%=request.getContextPath()%>/writeImage.htm?' onerror='onImgError(this);' onLoad='setDefaultImage(this);'>"

function setDefaultImage(source){
        var badImg = new Image();
        badImg.src = "video.png";
        var cpyImg = new Image();
        cpyImg.src = source.src;

        if(!cpyImg.width)
        {
            source.src = badImg.src;
        }

    }


    function onImgError(source){
        source.src = "video.png";
        source.onerror = ""; 
        return true; 
    }

Таким образом, он работает во всех броузерах.

Спасибо Джиоти

Ответ 3

Если вы открыты для решения PHP:

<td><img src='<?PHP
  $path1 = "path/to/your/image.jpg";
  $path2 = "alternate/path/to/another/image.jpg";

  echo file_exists($path1) ? $path1 : $path2; 
  ?>' alt='' />
</td>

////EDIT ОК, здесь версия JS:

<table><tr>
<td><img src='' id='myImage' /></td>
</tr></table>

<script type='text/javascript'>
  document.getElementById('myImage').src = "newImage.png";

  document.getElementById('myImage').onload = function() { 
    alert("done"); 
  }

  document.getElementById('myImage').onerror = function() { 
    alert("Inserting alternate");
    document.getElementById('myImage').src = "alternate.png"; 
  }
</script>