Handling broken background-image for div

by Rohith K P

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div style="background-image:url('http://i.imgur.com/JomHWOF.jpg')"></div>
<div style="background-image:url('http://i.im')"></div>

CSS

div {
  height: 200px;
  width: 400px;
  background-color: #ccc;
}

JavaScript

//the placeholder image url
var defaultUrl = "url('https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png')";

$('div').each(function(index, item) {
  var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
  $('<img>', {
    src: currentUrl
  }).on("error", function(e) {
    $this = $(this);
    $this.css({
      "background-image": defaultUrl
    })
    e.target.remove()
  }.bind(this))
})