thymeleaf字段中list显示图片

阿虎-cqh

已于 2023-02-01 16:30:00 修改

阅读量384

点赞数

文章标签： html5

于 2022-08-17 09:30:32 首次发布

本文链接：https://blog.csdn.net/chenqinghu98/article/details/126378667

版权

文章目录

1.导入Css

<th:block th:include="include :: viewer-css"/>

2. 添加div

<div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>

3.导入js

<th:block th:include="include :: viewer-js"/>

4.字段中添加formatter 函数

formatter: function (value, row, index) {
                    let urls = (value?value:"").split("|");
                    if (urls.length>0) {
                        let content = "";
                        for (let i = 0; i < urls.length; i++) {
                            content += '<i class="fa fa-picture-o"></i> ';
                        }
                        return '<a class="btn btn-icon" href="javascript:void(0);" onclick="view(\'' + value + '\')">' + content + '</a>';
                    }
                    return "无"
                }

5.添加view函数点击查看图片

// 查看图片
    let viewer = null;
    function view(urls) {
        let container = $("#viewer").empty();
        let ps = urls.split("|");
        for (let i = 0; i < ps.length; i++) {
            container.append('<li><img src="' + ctx + ps[i] + '" alt="图片1"></li>');
        }
        viewer = new Viewer(container[0], {
            fullscreen: true,
            hidden: function () {
                viewer.destroy();
                viewer = null;
            }
        });
        container.find("img").click();
    }