页面显示图片列表，点击放大和缩小展示

Java后台方法，从数据库中取出存储文件的地址信息，将string类型转换成list

@GetMapping("/detail/{id}")
    public String detail(@PathVariable("id") Long id, ModelMap mmap) {
        TbOutKeyStorage tbOutKeyStorage = tbOutKeyStorageService.selectTbOutKeyStorageById(id);
        String annexPath = tbOutKeyStorage.getAnnexPath();
        List<String> list = new ArrayList<>();
        if (annexPath!=null && !annexPath.isEmpty()){
            list = Arrays.asList(annexPath.split(","));
        }
        mmap.put("businessImgList",list);
        return prefix + "/detail";
    }

前端Html代码，需要通过下载方法加文件路径获取图片信息

<div class="col-sm-6">
    <div class="vertical-timeline-block">
        <div class="vertical-timeline-icon navy-bg">
            <i class="fa fa-photo"></i>
        </div>
        <div class="vertical-timeline-content">
            <h2>业务手续</h2>
            <div class="vertical-timeline-content" th:each="imgItem:${businessImgList}">
                <img style="width: 95%" th:src="@{/common/downloadChart(fileName=${imgItem})}" onclick="previewImagePop(this)"/>
            </div>
            </div>
        </div>
    </div>
</div>

前端Js点击缩放方法，图片右上角有x，或者点击空白缩小图片

//预览
function previewImagePop(_that) {
    // 图片预览事件
    var src = $(_that).attr('src');
    var target = $(_that).data('target') || "self";
    if ($.common.equals("self", target)) {
        var height = $(_that).data('height') || "auto";
        var width = $(_that).data('width') || "auto";
        layer.open({
            id: "div_img", /* 给个固定的ID，方便后面查找元素 */
            title: false,
            type: 1,
            closeBtn: true, /* 关闭按钮 */
            shadeClose: true, /* 点击阴影区域关闭弹窗 */
            area: ['auto', 'auto'],
            content: "<img src='" + src + "' height='" + height + "' width='" + width + "'/>",
            success: function (layero, index) {
                // 图片加载完成后，再次处理图片宽度
                $('#div_img > img', layero).on('load', function () {
                    // 获取图片宽和高
                    let imgElement = $('#div_img > img', layero);
                    let imgWidth = imgElement.width();
                    let imgHeight = imgElement.height();

                    // 获取 mainContent 宽和高
                    let mainContent = $('#content-main', window.parent.document);
                    if (mainContent.length <= 0) {
                        /* 修正mainContent：如果在新窗口中打开链接时，没有父级窗口 */
                        mainContent = $(window);
                    }
                    let mainContentWidth = mainContent.width();
                    let mainContentHeight = mainContent.height();

                    /* 计算图片的宽度 */
                    let newImgWidth = imgWidth;
                    /* 图片超宽时，将图片的宽度设置为当前窗口的95%。图片高度auto */
                    if (imgWidth > mainContentWidth * 0.95) {
                        newImgWidth = mainContentWidth * 0.95;
                    }
                    /* 图片超高时，计算一个让图片不超高的宽度。图片高度auto */
                    if (imgHeight > mainContentHeight * 0.95) {
                        let tmpNewImgWidth = imgWidth * (mainContentHeight * 0.95 / imgHeight);
                        if (newImgWidth > tmpNewImgWidth) {
                            newImgWidth = tmpNewImgWidth;
                        }
                    }

                    /* 重新设置图片的宽度、高度 */
                    // 图片容器的高度设置为auto，不设置时，该容器的高度为固定值
                    $("#div_img", layero).height('auto');
                    // 指定图片的宽度
                    $("#div_img > img", layero).attr({width: newImgWidth});
                    // 很重要。触发窗口的 resize 事件，让 layer 调整位置。
                    $(window).resize();
                });
            }
        });
    } else if ($.common.equals("blank", target)) {
        window.open(src);
    }
}

//移除
function deleteImg(_that) {
    $(_that).closest('div').remove();
}