Как изменить фоновое изображение по умолчанию

Question

Я использую следующую функцию для создания динамических элементов с использованием ответа ajax.

function itemGroupSelection(elem,majorGroupId,itemGroupId){ 

    var itemGroup; 
    var majorGroup; 

    if(elem == undefined || elem == null || elem == ""){ 
     var itemGroup = itemGroupId; 
     var majorGroup = majorGroupId; 
    }else if(majorGroupId == null && itemGroupId == null){ 
     var itemGroup = elem.attr("id"); 
     var majorGroup = elem.attr("majorgroup"); 
    } 



    $('.breadcrumb a').removeClass('active'); 

    if(elem == ""){ 
     $('.breadcrumb a').first().addClass('active'); 
    }else{ 
     elem.addClass('active'); 
    } 

    var selectedOutlet = $('#outlets select').children(":selected").attr("id"); 
    $('.item').show(); 
    $('.breadcrumb').show('1'); 
    var data = "majorGroupId=" + majorGroup + "&itemGroupId=" + itemGroup + "&outletCode=" + selectedOutlet; 

    if(selectedOutlet == undefined){ 
     getSystemMessage('Please select an outlet.'); 
    }else{ 
     ajaxCall("/getItems","POST",data,function(result){ 
      var element = $('#model-item').find('.item').first(); 
      $('#item-list-section').empty(); 

      for(var i = 0; i < result.items.length; i++){ 
       var clone = element.clone(); 

       clone.attr("id", result.items[i].itemId); 
       clone.find('.item-price').html("<h4>" + result.items[i].rate.toFixed(2) + "</h4>"); 
       if(result.items[i].itemName.length >= 20){ 
        clone.find('.item-name').css('overflow','hidden'); 
        clone.attr('title', result.items[i].itemName) 
       } 
       clone.find('.item-name').html("<h4>"+ result.items[i].itemName + "</h4>"); 
       clone.css('background-image','c:/zharaimages/' + result.items[i].itemId + '/image.jpg'); 

       clone.draggable({ 
        revert : false, 
        zIndex: 1, 
        containment: "window", 
        opacity: 0.5, 
        cursor: "move", 
        helper: function() { return $(this).clone().appendTo('body').show(); } 
       }); 
       $('#item-list-section').append(clone); 
      } 
     }); 
    } 


} 

Используя следующую команду, я пытаюсь выбрать фоновое изображение на локальном диске.

clone.css('background-image','c:/zharaimages/' + result.items[i].itemId + '/image.jpg'); 

Как я могу переключиться на изображение по умолчанию, если в указанном пути нет изображения. Я использую jQuery 1.9.

Answer 1

Вы должны обрабатывать onerror событие этого образа, который будет происходить каждый раз, когда файл не может быть найден:

$('#image').error(function(){ 
    $(this).off('error'); // otherwise, inexistence of the default image is a real pain 
    $(this).attr('src', 'http://www.google.ca/images/srpr/logo4w.png'); 
}); 

Взгляните на этот рабочий FIDDLE.

---

Затем

в вашей ситуации, вы могли бы иметь что-то вроде этого:

var path='the path'; 

clone.css('background-image', 'url('+path+')'); 
$('<img src="'+path+'" />').error(function(){ 
    $(this).off('error'); 
    clone.css('background-image', 'url('+default_path+')'); 
}); 

Надеется, что это помогает :-)

Answer 2

Попробуйте использовать OnError атрибут IMG, если ссылка, указанная в атрибуте src, не загружается, вызывается функция ur по ошибке и вы можете установить изображение по умолчанию там (w3schools.com/jsref/event_img_onerror.asp)