用layui写个页面3个按钮点击按钮显示图片

以下是一个简单的示例代码，使用layui的按钮组件和图片预览组件实现：

HTML代码：

<div class="layui-btn-group">
  <button class="layui-btn" id="btn1">显示图片1</button>
  <button class="layui-btn" id="btn2">显示图片2</button>
  <button class="layui-btn" id="btn3">显示图片3</button>
</div>

<div id="img-container"></div>

JavaScript代码：

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来适应你的需求。