【Layui】layui预览图片，视频

window.showBigImage = function (e) {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true, //点击阴影关闭
        area: [$(e).width + 'px', $(e).height + 'px'], //宽高
        content: "<img src=" + $(e).attr('src') + " />"
    });
};

使用方法：
<img class="layui-upload-img" style="width: 95px;" src="{$icon.index_url}" id="demo1" onclick="showBigImage(this)">

function imgOpen(url) {
    layui.use(['carousel', 'laydate', 'layer'], function () {
        //页面层-图片
        layer.open({
            closeBtn: 2,
            shift: 3,
            shadeClose: true, // 点击遮罩关闭层
            type: 1,
            title: '预览图',
            resize: true,
            // maxmin: true, //打开放大缩小按钮
            area: ['1024px', '608px'],
            content: "<span><img style='width:100%;height: 100%;' src=" + url + " /></span>",//注意，如果str是object，那么需要字符拼接。
        });
        
        // layer.photos({
        //     photos: {
        //         "title": '预览图',
        //         "start": 0,
        //         "data": [{ "src": url}]
        //     }
        //     , closeBtn: 1//是否显示关闭按钮
        // });
    })
}

//视频预览，传url,width,height
function previewVideo(url, width, height) {
    width = width ? width : '65%';
    height = height ? height : '65%';
    let content = '<video width="100%" height="90%"  controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop">' +
        '<source src="' + url + '" type="video/mp4"></source></video>';
    layer.open({
        type: 1,
        maxmin: true, //打开放大缩小按钮
        title: '视频播放',
        area: [width, height],
        content: content,
    });
}