实现效果：点击图片实现放大，点击空白处关闭效果。下图。

实现逻辑：二维码是使用JQ插件生成的，点击二维码，获取图片路径，通过Layui的弹窗显示放大后的图片。

方法一

Html

<div id="qrcode" class="pi-codeimg-open" style="width:1.5rem;height:1.5rem;margin:0 auto"></div>
<div style="font-size:0.22rem; width:1.8rem; text-align:center; margin:0 auto">签到二维码(放大)</div>
                            

js代码，获取点击图片的路径，修改样式 

$("#qrcode").click(function(){
       var imgSrc=$("#qrcode img").attr('src');
        // console.log(imgSrc)
        
        layer.open({
          type:1
          ,title:false
          ,closeBtn:0
          ,skin:'layui-layer-nobg'
          ,shadeClose:true
          ,content:'<div style="border:0px solid red;width:100%; padding:10px;border-radius:15px; "> ' 
                    +' <img src="'+imgSrc+'" style="width:3.5rem; height:3.5rem" > '
                    +' <div style="text-align:center; height:0.5rem; line-height:0.6rem">签到二维码</div> '
                +' </div>'
          ,scrollbar:false
      })

})

JQ生成二维码参考：【前端】JQ生成二维码_下页、再停留的博客-CSDN博客JQ生成二维码。https://blog.csdn.net/qq_25285531/article/details/132223927

方法二

<img src="{$item.herb_image}" alt="{$item.herb}" width="150px" onclick="show_img(this)">

// 预览图片
function show_img(img){
    
    console.log(img.src)
    
    layer.open({
      type: 1,
      title: false,
      closeBtn: 0,  //不显示关闭按钮
      area: 'auto',
      skin: 'layui-layer-rim', // 没有背景色的class
      shadeClose: true, //开启遮罩层
      content: "<img src='" + img.src + "' style='margin: auto; max-width: 100%; max-height: 500px; display: block;'>"
    });
}