Javascript 如何在muidatatables中添加图像？

注意：Image位于名为“profileImage”的数据库中。每当我添加此代码时，我都希望使Image对象像其他对象一样是动态的

{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: [],
}

this.state={
栏目：[
{
标签：“国民身份证”，
名称：“国有化”，
可排序：是的，
过滤器：对，
选项：{
customBodyRender：（val）=>(
{val}
),
},
},
{
标签：“患者姓名”，
姓名：“姓名”，
过滤器：对，
},
{
//想在这里添加图像吗
},
{
标签：“电话号码”，
姓名：“电话”，
可排序：是的，
过滤器：对，
},
{
标签：“地址”，
姓名：“地址”，
可排序：是的，
过滤器：对，
},
{
标签：“ID”，
隐藏：是的，
名称：“国有化”，
按钮：{
秀：没错，
值：“预约”，
操作：（val）=>this.needAppointment（val），
},
},
],
行选择：“单个”，
行数据：[]，
}

对于这种情况，我们基本上使用

customBodyRender

。对于这种情况，可以使用以下代码

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

{
名称：“profileimage”，
标签：“图像”，
选项：{
customBodyRender:（）=>{
返回(
)
}
}
},