vue3+antd ant-design table显示图片

在 Vue3 中使用 Ant Design 的 Table 组件显示图片，可以通过使用 `customRender` 来自定义渲染列的内容。具体步骤如下：

1. 在 Table 中，将需要显示图片的列的 `customRender` 属性设置为一个函数，用于渲染该列的内容。

2. 在 `customRender` 函数中，使用 `img` 标签来显示图片。可以使用 `record` 参数来获取当前行的数据，并从中获取图片的链接。

下面是一个简单的示例代码：

<template>
  <a-table :columns="columns" :data-source="data" />
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: "John Brown",
          age: 32,
          avatarUrl: "https://example.com/avatar.jpg",
        },
        {
          name: "Jim Green",
          age: 42,
          avatarUrl: "https://example.com/avatar.jpg",
        },
      ],
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "Name",
          dataIndex: "name",
        },
        {
          title: "Age",
          dataIndex: "age",
        },
        {
          title: "Avatar",
          dataIndex: "avatarUrl",
          customRender: ({ text }) => {
            return <img src={text} style="width: 50px" />;
          },
        },
      ];
    },
  },
};
</script>

在这个示例中，我们将 `avatarUrl` 列的 `customRender` 属性设置为一个函数，用于渲染该列的内容。在 `customRender` 函数中，我们使用 `img` 标签来显示图片。通过解构传入的参数，我们可以获取到当前行的数据，并从中获取图片的链接。最终，我们将 `customRender` 函数作为 `avatarUrl` 列的渲染函数，从而显示图片。

希望这可以帮助到你！