CODEWITHSUNDEEP
jquery
Pawan
Pawan

Reputation: 32321

how to show a default image Incase the Image is found

I will be getting a JSON response from a server 

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>');
    }

With the above JSON Data i am showing the images dynmaically on the User Interface as shown below and the User Interface looks this way

enter image description here

My question is that in case a particular image is not found under the JSON_images , how can i show a default image ??

Upvotes: 0

Views: 47

Answers (1)

jagmitg
jagmitg

Reputation: 4546

I mean if your using jquery, you can do either one, find the one which has an error and replace it with an missing image or hide it.

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

or

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

JSFIDDLE EXAMPLE: http://jsfiddle.net/zm3qndxo/

Upvotes: 1

Related Questions