如何在MUI X DataGrid列中显示带onError的img元素？

你当前的问题是用valueGetter返回HTML字符串，DataGrid会把它当成纯文本显示，而不是解析成DOM元素。要在DataGrid里渲染自定义React元素，应该用renderCell属性，而不是valueGetter。

修改你的列配置如下：

const wrongImgHandler = (photo) => {
  return photo && PHOTO_PATTERN.test(photo) ? photo : "female_sad.png";
};

const imgErrorHandler = ({ currentTarget }) => {
  // 防止重复触发错误
  currentTarget.onerror = null;
  currentTarget.src = "male_sad.png";
};

const columns = [
  {
    field: "elo",
    headerName: "Elo",
    type: "number",
    width: 90,
  },
  {
    field: "given",
    headerName: "First name",
    width: 150,
  },
  {
    field: "photo",
    headerName: "Photo",
    sortable: false,
    width: 160,
    // 用renderCell替代valueGetter，返回React元素
    renderCell: (params) => (
      <img
        src={wrongImgHandler(params.row.photo)}
        className="avatar"
        onError={imgErrorHandler}
        alt="User avatar" // 建议添加alt属性提升可访问性
      />
    ),
  },
];

关键说明： #

• valueGetter的作用是处理单元格的数据值（比如格式化数字、拼接字符串），最终返回的是字符串/数值等原始数据类型，DataGrid会直接将其作为文本渲染。
• renderCell是专门用于自定义单元格渲染的属性，它允许你返回任意React元素，DataGrid会将这些元素渲染到单元格中，完全符合React的组件渲染逻辑。
• 你原有的wrongImgHandler和imgErrorHandler逻辑可以直接保留，在JSX中正常使用即可。

内容的提问来源于stack exchange，提问作者Alexander Farber