layui中怎么表格里显示图片

在layui中，要在表格中显示图片，需要通过两种方式来实现：

1. 直接在表格单元格中插入img标签

2. 在表格单元格中插入laytpl模板，通过模板来渲染图片

下面将分别介绍这两种方式的具体实现方法。

1. 在表格单元格中插入img标签

要在表格中显示图片，我们可以通过在表格单元格中插入img标签的方式来实现。具体实现方法如下：

<table class="layui-table" lay-skin="line">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>头像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td><img src="img/avatar.jpg" alt="头像" width="64" height="64"></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td><img src="img/avatar.jpg" alt="头像" width="64" height="64"></td>
    </tr>
  </tbody>
</table>

在表格单元格中插入img标签后，需要设置图片的src属性来指定图片的路径。为了保证图片的显示效果，可以设置图片的width和height属性来指定图片的宽度和高度。此外，可以设置图片的alt属性来为图片添加一个描述性的文字，这样即使图片无法正常显示时，也可以显示出提示文字。

2. 在表格单元格中插入laytpl模板

直接在表格单元格中插入img标签的方式虽然简单，但有一个缺点，即无法在图片上做更多的样式和交互效果。如果想要实现更多的效果，可以通过在表格单元格中插入laytpl模板来渲染图片。具体实现方法如下：

首先，在HTML的头部引入laytpl模块：

<script src="layui/layui.js"></script>
<script>
layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  //......
});
</script>

接着，在表格中定义一个隐藏的模板，用来渲染图片：

<script type="text/html" id="imageTpl">
  <div class="image-box">
    <img src="{{d.image}}" alt="{{d.alt}}">
    <div class="image-mask"></div>
    <div class="image-info">{{d.info}}</div>
  </div>
</script>

在模板中，我们定义了一个<div>元素为图片元素的父容器，其中包含了一个img元素和两个<div>元素。其中，img元素的src属性和alt属性分别从数据中获取，用来指定图片的路径和描述性的文字。两个<div>元素用来分别实现鼠标移入移出的遮罩和图片说明。

最后，在表格中的单元格中通过laytpl模板来渲染图片：

<table class="layui-table" lay-skin="line">
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>头像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>
        {{# layui.laytpl($('#imageTpl').html()).render({image: 'img/avatar.jpg', alt: '头像', info: '这是张三的头像'}) }}
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>
        {{# layui.laytpl($('#imageTpl').html()).render({image: 'img/avatar.jpg', alt: '头像', info: '这是李四的头像'}) }}
      </td>
    </tr>
  </tbody>
</table>

通过使用laytpl模板，我们可以将图片渲染到一个<div>元素中，并在<div>元素中添加了更多的样式和交互效果。其中，{{#}}中的代码用来指定要渲染的模板内容，通过{{d.}}的方式来获取数据中的属性值，从而在模板中动态渲染图片。此外，需要注意的是，模板渲染需要在layui.use函数中执行，因为模板需要等待layui模块加载完成后才能被正确渲染。

综上所述，通过在表格中插入img标签和laytpl模板，都可以实现在表格单元格中显示图片的效果。具体选择哪种方式需要根据实际需求和优化效果来确定。