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

尝试使用img的onerror属性，如果src属性中给出的链接无法加载，则调用错误的函数，你可以在那里设置默认图像（w3schools.com/jsref/event_img_onerror.asp)

如何更改为默认背景图像

2 个答案: