Owl Carousel加载数据库二进制图片仅显示首张后空白如何解决

• 配置冲突：开启了Owl Carousel的懒加载（lazyLoad: true），但图片未使用懒加载要求的data-src属性存储地址，而是直接写在了src中，Owl Carousel会自动将非首屏轮播项的图片src替换为占位符，导致后续图片丢失
• 重复初始化：代码中先后两次调用owlCarousel()方法初始化同一个轮播容器，会破坏已生成的轮播DOM结构，导致轮播项渲染异常
• 参数类型错误：autoplayTimeout配置为字符串类型'1000'，不符合组件要求的数字类型规范

步骤1：调整懒加载配置（二选一即可） #

方案A：关闭懒加载（更适合base64图片场景，无需懒加载） #

直接修改轮播初始化配置，将lazyLoad: true改为lazyLoad: false

方案B：保留懒加载，调整图片属性 #

将aspx中img标签的src改为data-src，示例如下：

<img id="ImageRpt<%= i %>" class="owl-lazy" data-src="data:image/jpg;base64,<%= Convert.ToBase64String(CType(dataRow("Data"), Byte()))%>" alt="Red Dot" />

步骤2：删除重复初始化代码 #

删除$(document).ready之外的所有轮播初始化、事件绑定代码，即删除以下冗余代码：

var carousel = $('#sg-carousel');
carousel.on({
    'initialized.owl.carousel': function () {
        carousel.find('.item').show();
        carousel.find('.loading-placeholder').hide();
    }
}).owlCarousel(options);
$('.item').trigger('initialized.owl.carousel').show();

步骤3：修正参数类型 #

将轮播配置中的autoplayTimeout: '1000'改为autoplayTimeout: 1000

$(document).ready(function () {
    var items = $('.item');
    if (items.length > 1){
        $("#sg-carousel").owlCarousel({
            items: 1,
            nav: true,
            navText:["<a class='carousel-control left  btn-circle pull-left' onclick='event.preventDefault();' href='#sg-carousel' data-slide='prev'><i class='fa fa-angle-left'></i></a>",
                     "<a class='carousel-control right  btn-circle pull-right' onclick='event.preventDefault();' href='#sg-carousel' data-slide='next'><i class='fa fa-angle-right'></i></a>"],
            loop: true,
            dots: false,
            lazyLoad: false, // 关闭懒加载
            smartSpeed:900,
            autoplay: true,
            autoplayTimeout: 1000, // 改为数字类型
            responsive: {
                0: {
                    items: 1
                },
                767: {
                    items: 1
                },
                1080:{
                    items: 1
                }
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Muhammad Shahid