Find failed img error path via jQuery and assign img src path

Question

First step - I am appending number of <img> tag in to specific div [Adding depends window width] see code here

function imgAdding() {
  for (var i = 0; i < ($(window).width()/100) -1  ; i++) {
    var $wrap = $('<img src="" width="100px" alt="" />');
    $('.img-wrap').append($wrap);
  }
}

Second step- Then adding different src path on each img tag [ ex: pic-1.gif , pic-2.gif , pic-3.gif ]

//img name adding
function hexImgName () { 
   var count = 0;
   $("img").each(function(i) {
      var imgSRC = 'img/hex/pic-'+(count)+'.gif'
      $(this).attr('src',imgSRC );
      count = parseInt  (count) + 1 
   });
}

Working fine last two steps

my problem here

Third step -I have only ten images in my img folder [pic-1.gif , pic-2.gif , .... last pic pic-10.gif ] , If there 15 img tag in html so last 5 img src path should fail -

my question

How can i find failed Image Error path via jQuery ? How can i randomly assign different src paths to our error images ?
Working area
Demo on full page

Thanks Friends

refer this question http://stackoverflow.com/questions/3646914/how-do-i-check-if-file-exists-in-jquery-or-javascript this might help you — Sohil Desai, Mar 27 '14 at 09:06
check this answer this would be helpful http://stackoverflow.com/questions/92720/jquery-javascript-to-replace-broken-images — Sohil Desai, Mar 27 '14 at 09:12
I dont know how to fix it bro @SohilDesai Please dont close this question — ShibinRagh, Mar 27 '14 at 09:32

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Fiddle Demo

Fiddle Full Screen Result View

Don't add images that don't exits

var DummyImg = 'https://www.google.co.in/images/srpr/logo11w.png';
function hexImgName() {
    $("img").each(function (i) {
        if (i <= 10) { //check images count here if it's less than equal to 10
            var imgSRC = 'http://toobler.com/staging/design/plicks-landing/testpath/pic-' + i + '.gif'
            $(this).attr('src', imgSRC); //than add new src
        } else {
            $(this).attr('src', DummyImg); //if not add any other image
        }
    });
}

If you want to check on error

Read jQuery/JavaScript to replace broken images

Update after OP's comment

Fiddle Demo

Fiddle Full Screen Result View

var maxImg = 10; 
function hexImgName() {
    var imgSRC = '';
    $("img").each(function (i) {
        if (i <= maxImg) { //check images count here if it's less than equal to maxImg 
            imgSRC = 'http://toobler.com/staging/design/plicks-landing/testpath/pic-' + i + '.gif';
        } else {
            var randomImg = Math.floor(Math.random() * maxImg) + 1; //generate a random number from 0 to 10
            imgSRC = 'http://toobler.com/staging/design/plicks-landing/testpath/pic-' + randomImg + '.gif'; //make random image from  random number
        }
        $(this).attr('src', imgSRC);
    });
}

//How can i randomly assign different src paths to our error images ? // — ShibinRagh, Mar 27 '14 at 09:29

score 0 · Answer 2 · answered Mar 27 '14 at 09:15

function hexImgName () { 
   var count = 0;
   $("img").each(function(i) {
      var imgSRC = 'img/hex/pic-'+(count)+'.gif'
      $(this).attr('src',imgSRC );
      $(this).error(function(){
          alert('error'+count);
      });
      count = parseInt  (count) + 1 
   });
}

score 0 · Answer 3 · edited Apr 25 '18 at 13:59

Simple and good solution. You could simply use jQuery to select images that generate en error by using on('error', function).

$(document).ready(function(){
    // remove not found images
    $('img').on('error', function(){
        // change src attribute for img which generate error
        $(this).attr('src','http://somePathToImg.com/images/default.img');
        // OR do somrthing else for example remove div that wraps the img (with the img)
        $(this).closest('div').remove();
    });
});

Regards

Find failed img error path via jQuery and assign img src path

3 Answers3