如何在mui-datables中添加图像？

Question

注：映像在名为“ profileImage”的数据库中，我想在我添加此代码

时，像其他对象一样制作动态的映像对象

{ label: "Image", name: "profileImage", }

它只需显示图像端点，例如3704545668418.png和for profile图像的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>
      )
    }
  }
},

如果您使用的是MUI-X数据网格5，那么我认为它会有所帮助。

Answer 2