layer.opent()方法显示图片

<label class="col-sm-2 control-label">饮片检验报告：</label>
                                    <div class="col-sm-2" style="margin-top: 6px;">
                                        <span id="ypjybg"></span>
                                    </div>

当从后台获取到数据后，就会填充标签

$("#yycjybg").html("<a href='javascript:;' style='margin:2px;' 
onclick=\"showyreport('" + mes.data.bYpProduce.yreport + "')\" title='查看报告'><span>查看报告</span></a>");

效果如下:

 当点击查看报告，效果如下：

showyreport方法如下：

function showyreport(yreport) {
        console.log(yreport)
        var x = document.documentElement.clientWidth/16;
        var y = document.documentElement.clientHeight/16;
        var img = "<img src='" + ctx + "/ypimg" + yreport + "' />";
        layer.open({
            type: 1, // 显示图片时，type选1
            offset:[y+"px",x+"px"], // 左上角点偏移距离
            area:['auto','700px'], // 区域，auto指宽度自适应，高度设置为700px
            // area: ['1000px', '500px'],
            shade: false,
            title: false, // false表示不显示标题
            maxmin: true, // true表示显示最大化和最小化
            closeBtn: 1, // 1表示显示关闭的X号，0表示不显示
            content: img // img标签
        });
    }

注意：当area设置如下时，

area:['auto','auto'],

可能会导致第一次点击图片时，只显示局部图片，如下所示：

 解决方法：可以设置area的宽度或高度。如上，当我将area的高度设置为700px时，当第一次点击图片时就会将图片的高度设置为700px，这样就不会只显示一点点图片了。