bootstraptable 手册_bootstrap table表格 展示图片

在 Bootstrap Table 表格中展示图片，可以使用 `data-formatter` 属性来自定义格式化函数，将图片链接转换为图片元素。下面是一个简单的例子：

<table id="myTable">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Name</th>
      <th data-field="image" data-formatter="imageFormatter">Image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>https://example.com/image1.jpg</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>https://example.com/image2.jpg</td>
    </tr>
  </tbody>
</table>

在这个例子中，我们定义了一个名为 `imageFormatter` 的格式化函数，用于将图片链接转换为图片元素。下面是这个函数的定义：

function imageFormatter(value, row) {
  return '<img src="' + value + '" alt="Image">';
}

这个函数接受两个参数，`value` 表示当前单元格的值，也就是图片的链接地址，`row` 表示当前行的数据对象。在这个函数中，我们使用字符串拼接的方式来创建一个包含图片元素的 HTML 字符串，然后返回这个字符串。

最后，我们需要在表格初始化时将这个格式化函数注册到 `window` 对象中，以便在表格中使用。在 JavaScript 中添加下面的代码：

$(function() {
  window.imageFormatter = function(value, row) {
    return '<img src="' + value + '" alt="Image">';
  };
  $('#myTable').bootstrapTable();
});

这样，我们就可以在表格中展示图片了。需要注意的是，如果图片过大，可能会导致表格单元格的高度自动拉伸，影响表格的美观性，此时可以使用 CSS 样式来控制图片的大小和比例，以适应表格的布局。