placeholder image for background-image?

Question

.mydiv(style="background-image: url('"+pic+"');" onerror="this.style.background-image:url('http://www.naijaticketshop.com/images/default_profile.jpg'); ")

I'm aware you would use onerror for an placeholder, but this doesn't seem to be working for background-image. Any suggestions?

Answer 1

<img src="my.png" onerror="this.src = 'http://www.naijaticketshop.com/images/default_profile.jpg';" />

or with jquery

// Replace source
$('.mydiv').error(function(){
        $(this).attr('background-image', 'url(http://www.naijaticketshop.com/images/default_profile.jpg)');
});

Answer 2

You need this.style.backgroundImage, not this.style.background-image

Answer 3

You can't use onerror on <div>. onerror can only use on <img>, <object>, <script>, <style>. So, Need to replace with <img> tag. If you don't want to replace with it, I found that on stackoverflow. How to replace nonexistent images with a placeholder in asynchronous loading from database