JS Broken Images Handler - A Simple script to

broken-image-placeholder.js

(function ($) {
  // @input `containerSelector` - String: a CSS selector which targets container of `<img>` element(s) you want to be replaced in case of error (mostly 404)
  // @input `imagePath`         - String: Absolute/Relative path to image file which would be shown (replaced)
  window.handleBrokenImage = function (containerSelector, imagePath) {
      if (!containerSelector) {
          return false;
      }

      imagePath = imagePath || 'https://placeholdit.imgix.net/~text?txtsize=33&txt=webgodo&w=350&h=150';

      $(containerSelector)
          .find("img")
          // iterate over <img> elements and check if they are loaded properly
          .each(function (index, item) {
              var $img = $(item);
              // get image's original source
              var src = $(item).attr("src");
              var img = document.createElement("img");
              
              img.onerror = function () {
                  $img.attr("src", imagePath);
              };
        
              img.src = src;
          });
  }
})(jQuery);