如何在muidatatables中添加图片？

Question

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

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

现在请告诉我如何在此 table

中添加图像列

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>
      )
    }
  }
},

如何在muidatatables中添加图片？

How to add Image in muidatatables?

javascript

reactjs

material-ui

react-material

mui-datatable