Layer 弹出框中显示多张图片的代码示例

Layer 弹出框中显示多张图片的代码示例

data.images 中含有多张图片的 http 地址，如何在弹出窗中显示？

可以通过遍历 data.images 数组，并在每次循环中创建一个 <img> 标签来显示多张图片。

修改代码如下：

layer.open({
  title: '查看',
  content: '查看弹窗的HTML代码',
  area: ['500px', '400px'],
  success: function(layero, index){
    var html = '<div>机构号:'+ data.institution +'</div>';
    html += '<div>邮件号: ' + data.mailNumber + '</div>';
    html += '<div>邮件描述: ' + data.describe + '</div>';
    
    // 显示多张图片
    if (data.images.length > 0) {
      html += '<div>图片:</div>';
      for (var i = 0; i < data.images.length; i++) {
        html += '<img src='' + data.images[i] + '' style="width: 100px; height: 100px; margin-right: 10px;" />';
      }
    }
    
    html += '<div>员工姓名: ' + data.username + '</div>';
    html += '<div>状态（后台编辑）: ' + data.state + '</div>';
    html += '<div>上传时间: ' + data.date + '</div>';
    $(layero).find('.layui-layer-content').html(html);
  }
});

在上述代码中，我们通过遍历 data.images 数组来生成多个 <img> 标签，并设置每张图片的宽度、高度和右边距。这样就可以在弹出窗中显示多张图片了。