传单弹出窗口中的图像

Question

我正在尝试通过名为 project.js 的文件解决此问题。下面的图像滑块连接到 QGIS，从它从数据库中抓取 image 作为数组的代码可以看出。它面临的问题在当前问题之后重复（下一个），底部是代码。请帮忙。

    mymap.on('popupopen', function (e) {
        if (e.popup._source && e.popup._source.feature && e.popup._source.feature.properties && e.popup._source.feature.properties.border) {
            var feature = e.popup._source;
            let html = '';
            

            $('#slide').append('<div id="slideButton">');
            $('#slide').append(' <a  class="font-weight-light text-center  underline-on-hover" style="    cursor: pointer ;float: left"     onclick="slide( -1 )">' + prev + '</a>');
            $('#slide').append('<a class="font-weight-light text-center underline-on-hover" style="    cursor: pointer ;float: right"     onclick="slide( 1 )">' + next + '</a> ');
            $('#slide').append('</div>');
            for (var i = 1; i <= 6; i++)
                if (feature.feature.properties['Image_' + i]) {
                    imgArr.push(feature.feature.properties['Image_' + i]);
                    $('#imgDiv').append('<div><img id="id' + i + '" style="height:90px;width:90px;" src="/image/' + feature.feature.properties['Image_' + i] + '   "/></div>');
                    
                }
                if (imgArr.length > 0) {
                    slide(0);
                    imgArr = [];
                    imgArrIndex = 0;
                    var next = "Next";
                    var prev = "Back";
                }
        } else if (e.popup._source && e.popup._source._eventParents && e.popup._source._eventParents[Object.keys(e.popup._source._eventParents)] && e.popup._source._eventParents[Object.keys(e.popup._source._eventParents)].feature.properties.construction) {
            var feature = e.popup._source._eventParents[Object.keys(e.popup._source._eventParents)];
            let html = '';
            imgArr = [];
            imgArrIndex = 0;
            for (var i = 1; i <= 6; i++)
                if (feature.feature.properties['image' + i]) {
                    imgArr.push(feature.feature.properties['image' + i]);
                    $('#imgDiv').append('<div><img id="id' + i + '" style="height:90px;width:90px;" src="/image/' + feature.feature.properties['image' + i] + '   "/></div>');
                    
                }
                if (imgArr.length > 0) {
                    slide(0);
                    var next = "Next";
                    var prev = "Back";
    
                    $('#slide').append('<div id="slideButton">');
                    $('#slide').append(' <a  class="font-weight-light text-center  underline-on-hover" style="    cursor: pointer ;float: left"     onclick="slide( -1 )">' + prev + '</a>');
                    $('#slide').append('<a class="font-weight-light text-center underline-on-hover" style="    cursor: pointer ;float: right"     onclick="slide( 1 )">' + next + '</a> ');
                    $('#slide').append('</div>');
                }
            
        }

    });
}