如何在 muidatatables 中添加图像？

Question

注意：图像在名为“profileImage”的数据库中，每当我添加此代码时，我想制作像其他对象一样动态的图像对象

{ label: "Image", name: "profileImage", } 它只是显示图像端点，如 3704545668418.PNG，profileImage 的 url 是 https://cloudclinicdevapi.azurewebsites.net/Profile/3704545668418.PNG

现在请告诉我如何在此表中添加图像列

this.state = {
  columns: [
    {
      label: "National ID",
      name: "nationalID",
      sortable: true,

      filter: true,

      options: {
        customBodyRender: (val) => (
          <NavLink className="NavLink" to={`/EditPatient?Patient=${val}`}>
            {val}
          </NavLink>
        ),
      },
    },
    {
      label: "Patient Name",
      name: "name",
      filter: true,
    },
    {
      //want to add Image here
    },
    {
      label: "Phone Number",
      name: "phone",
      sortable: true,
      filter: true,
    },
    {
      label: "Address",
      name: "address",
      sortable: true,

      filter: true,
    },
    {
      label: "ID",
      hide: true,
      name: "nationalID",
      button: {
        show: true,
        value: "Make an Appointments",
        operation: (val) => this.needAppointment(val),
      },
    },
  ],
  rowSelection: "single",
  rowData: [],
}

Answer 1

基本上我们在这种情况下使用customBodyRender。对于这种情况，您可以使用以下代码。

{
  name: "profileimage",
  label: "Image",
  options: {
    customBodyRender: () => {
      return (
        <Avatar variant="rounded" src="xyz.PNG" >
        </Avatar>
      )
    }
  }
},