如何显示默认图像Incase找到图像

Question

我将从服务器获取JSON响应

var  imagesdata = 
{
    "images": [
        {
            "image": "JSON_images/popcorn.jpg",
            "name": "Popcorn"
        },
        {
            "name": "Ice creams",
            "image": "JSON_images/icecream_cup.jpg"
        },
        {
            "name": "Snacks & Corn",
            "image": "JSON_images/puff_egg.jpg"
        },
        {
            "image": "JSON_images/thumsup_can.jpg",
            "name": "Soft Drinks"
        }
    ]
}





  for (var i = 0; i < imagesdata.images.length; i++) {
        var imagename = imagesdata.images[i].image;
        var name = imagesdata.images[i].name;
        callImage(imagename, name);
    }

    function callImage(imagename, name) {
        var divhtml = $('<div class="item">');
        divhtml.append('<i><img class = "imgclss" id="' + name + '" src="' + imagename + '" alt=""/></i>');
        divhtml.append('</div>');
    }

使用上面的JSON数据，我在用户界面上以动态方式显示图像，如下所示，用户界面看起来像这样

我的问题是，如果在JSON_images下找不到特定图像，如何显示默认图像 ??

Answer 1

我的意思是如果你使用jquery，你可以做任何一个，找到有错误的那个并用缺少的图像替换它或隐藏它。

// Replace source
$('img').error(function(){
        $(this).attr('src', 'missing.png');
});

或

// Or, hide them
$("img").error(function(){
        $(this).hide();
});

---

JSFIDDLE示例：http://jsfiddle.net/zm3qndxo/