layui 图片轮播动态拼接不显示图片

昨天做一个图片轮播的功能，遇到了一个坑，话不多说上代码：

function pageReady() {
//定义carousel 然后初始轮播控件
---------------------------------------
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel;
        //图片轮播
        var ins =   carousel.render({
            elem: '#test'
            , width: '300px'
            , height: '300px'
            , arrow: 'none'
            , interval: '3000'
        });

    });
-------------------------------------------

//坑在这儿 底下的代码不能写在上面的function里面
    var html="";
    var url = $("#idCardPhoto").val();
    var arr = url.split(",");
    console.log((arr))
    if(arr.length>0){
        for(var  i in arr ){
            html+='<div><img id="imgid" src="'+arr[i]+'" style="width: 100%;height: 100%;"></div>';
        }
    }else{
        html+='<div><img id="idsb" src="/public/images/nopic.jpg" style="width: 100%;height: 100%;" ></div>';
    }

    $("#imgurl").append(html);

}

具体什么原因还不是特别的明确，但是这边的是这个问题，希望对大家有所帮助！！！