layui layer 图片预览手机版适用

layer 图片预览手机版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui layer 手机版图片预览</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>

<button id="preview" style="margin: 100px auto; display: block;">预览图片</button>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use('layer', function(){
    var layer = layui.layer;
    document.getElementById('preview').onclick = function(){
        let pic = 'https://gh-vote.oss-cn-qingdao.aliyuncs.com/artivity/20230808/file821cd2d9226fbc20afa854c87f82cd9ed57.png';
        // 创建新的图片对象
        let img_temp = new Image();
        // 设置图片的src
        img_temp.src = pic;
        // 显示loading
        let loadingIndex = layer.load(1);
        // 图片加载完成后执行的函数
        img_temp.onload = function() {
            // 关闭loading
            layer.close(loadingIndex);
            // 执行layer.open
            layer.open({
                type: 1,
                title: false,
                skin: 'myskin',
                area: ['92%', 'auto'],
                content: '<img src="' + pic + '" style="max-width: 100%; max-height: 100%; margin:0 auto;display:block"/>'
            });
        };
        // 如果图片加载失败，关闭loading并显示错误信息
        img_temp.onerror = function() {
            layer.close(loadingIndex);
            layer.msg('图片加载失败');
        };
    };
});
</script>

</body>
</html>
layui layer 图片预览 手机版 适用

layui layer 图片预览手机版适用
