Условие для отображения изображения в Javascript

Оптимальным встроенным решением будет

DEMO http://jsfiddle.net/LstNS/25/

<img src="rando/path" id="image" onerror="this.style.display='none';"/>

jQuery: вы можете использовать вызов ajax, чтобы проверить, существует ли файл изображения

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

DEMO http://jsfiddle.net/LstNS/24/

Как вы можете видеть в демо, второе изображение не загружается и отображается как сломанное изображение, поскольку оно не существует.

Версия без jQuery будет

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

Я просто нашел небольшой трюк, чтобы сделать это возможным. Это не соответствует соглашению, но оно работает. Я просто использую ключевое слово "alt" как ключевое слово "src", а JavaScript дает src равно атрибуту alt, найденному в html.

<img id="thmb" width="50px" height="50px" alt="http://blog.lefigaro.fr/bd/img-sanctuaire.png" ;>

Javascript:

var img = document.getElementById("thmb");
img.src= img.alt;

img.onerror = function () {
    img.style.display = "none";
}

http://jsfiddle.net/LstNS/28/

Для большего, потому что я должен использовать функцию, чтобы вернуть весь последний код html, я сделал это:

display: function (data) {
                            var pid = data.record.project_id;
                            var thb = data.record.Thumbnail;
                            var base_url = "<?php echo base_url('project');?>/";
                            function checkImg(){
                                try
                                {
                                    var thumbnail = document.createElement("img");
                                    thumbnail.src = thb;
                                } catch(err) {
                                    //
                                }
                                if(thumbnail.height > 0){
                                    var result = 'src="' + thb + '"';
                                }
                                else
                                {
                                    var result = 'style="display:none;"';
                                }
                                return result;
                            }
                            return '<a href="' + base_url + pid + '"><img id="thumbnail" ' + checkImg() + '" width="50px" height="50px" ></a>';
                        }

Я должен поблагодарить вас за все ваши ответы, которые позволяют мне найти хороший способ сделать это! Если у вас есть комментарии, не стесняйтесь! ;)

Теперь ваш код проверяет thumbnail.src, что означает, что вы проверяете наличие свойства src, которое всегда существует для синтаксически допустимого элемента img. Затем вы проверяете наличие обработчика событий onerror, и поскольку его нет, вы берете ветку, которая ничего не делает.

Способ, который работает, - использовать атрибут onerror в элементе img и заставить его удалить элемент (или удалить его из рендеринга, но фактическое удаление элемента более логично и безопаснее):

<img id="thmb" src= "http://blog.lefigaro.fr/bd/img-sanctuaire.png"
  width="50" height="50" alt="" onerror="rm(this)">
<script>
function rm(elem) {
  elem.parentNode.removeChild(elem); }
</script>

К сожалению, вы не можете сделать это с помощью цикла, который проходит через все элементы img. Если вы попробуете это, ваш код будет запущен только после выполнения загрузки изображения, поэтому было бы слишком поздно пытаться установить на них обработчики onerror.