Layui按钮点击显示图片示例 - 使用layer.photos()组件

layui.use(['layer', 'jquery', 'form', 'upload', 'element'], function () {
  var layer = layui.layer;
  var $ = layui.jquery;
  var form = layui.form;
  var upload = layui.upload;
  var element = layui.element;

  // 定义图片路径数组
  var imgPaths = [
    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
    'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg'
  ];

  // 点击按钮显示图片
  $('#btn1').click(function () {
    layer.photos({
      photos: {
        'title': '图片1',
        'data': [
          {
            'src': imgPaths[0]
          }
        ]
      }
    });
  });

  $('#btn2').click(function () {
    layer.photos({
      photos: {
        'title': '图片2',
        'data': [
          {
            'src': imgPaths[1]
          }
        ]
      }
    });
  });

  $('#btn3').click(function () {
    layer.photos({
      photos: {
        'title': '图片3',
        'data': [
          {
            'src': imgPaths[2]
          }
        ]
      }
    });
  });
});

在这个示例中，我们使用了layer.photos()方法来显示图片。该方法需要一个包含图片信息的对象作为参数，其中title属性表示图片集合的标题，data属性表示图片数据数组，每个元素包含一个src属性表示图片的URL。

我们在点击按钮时分别调用layer.photos()方法来显示不同的图片，传入的图片数据数组只包含了一个元素，即对应图片的URL。你可以根据需要修改图片路径数组和按钮的数量和ID来适应你的需求。