[toc] ![](https://img.kancloud.cn/10/40/10402f514171aa542c2e6c45311d499c_982x769.png) ## 实现 - public/assets/js/backend-init.js 加入以下代码 ``` $('body').on('click', '[data-tips-image]', function () { var img = new Image(); var imgWidth = this.getAttribute('data-width') || '480px'; img.onload = function () { var $content = $(img).appendTo('body').css({ background: '#fff', width: imgWidth, height: 'auto' }); Layer.open({ type: 1, area: imgWidth, title: false, closeBtn: 1, skin: 'layui-layer-nobg', shadeClose: true, content: $content, end: function () { $(img).remove(); }, success: function () { } }); }; img.onerror = function (e) { }; img.src = this.getAttribute('data-tips-image') || this.src; }); ``` - 然后给img标签加一个属性`data-tips-image`即可 ``` <img src="xxx" data-tips-image /> ``` ### 给`bootstrapTable`列图片加入效果 - public/assets/js/require-table.js 找到 `api.formatter.image/s` 给img标签加入`data-tips-image` 如下 ``` return '<a href="javascript:"><img class="' + classname + '" src="' + Fast.api.cdnurl(value) + '" data-tips-image /></a>'; ```