如何在MUI X Data Grid中渲染图片？renderCell尝试无效

问题说明 #

在MUI X Data Grid的表格中尝试插入图片，但仅显示图片URL；使用renderCell注入Avatar组件渲染图片未生效，已尝试同类问题的所有解决方案仍未解决，需排查操作错误并获取解决资源。

错误代码示例 #

const columns = [
  {
    field: "market_cap_rank",
    headerName: "Rank",
    width: 40,
    type: "number",
  },
  {
    field: "image",
    headerName: "Image",
    width: 150,
    rendercell: (params) => (
      <Avatar alt="Image" src={params.value} sx={{ width: 50, height: 50 }} />
    ),
  },
  { field: "name", headerName: "Coins", width: 130 },
  {
    field: "current_price",
    headerName: "Price",
    width: 100,
    valueGetter: (params) => {
      if (!params.value) {
        return params.value;
      }
      return `$${params.value}`;
    },
  },
  {
    field: "price_change_24h",
    headerName: "24 Hr",
    width: 100,
    rendercell: (params) => {
      return (
        <Typography variant="body1" sx={{ color: "green" }}>
          {params.value.toFixed(1)} %
        </Typography>
      );
    },
  }
];

<DataGrid
  rows={cryptoData}
  columns={columns}
  initialState={{
    pagination: {
      paginationModel: { page: 0, pageSize: 50 },
    },
  }}
  pageSizeOptions={[50, 100, 200]}
  checkboxSelection
/>

核心错误分析 #

代码中存在属性名大小写错误：MUI X Data Grid的列配置里，自定义单元格渲染的属性名是**renderCell**（驼峰写法），而你写成了全小写的rendercell，导致Data Grid无法识别该渲染逻辑，只能默认显示字段原始值（图片URL）。

修正后的代码 #

import { Avatar, Typography } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  {
    field: "market_cap_rank",
    headerName: "Rank",
    width: 40,
    type: "number",
  },
  {
    field: "image",
    headerName: "Image",
    width: 150,
    // 修正为正确的驼峰属性名renderCell
    renderCell: (params) => (
      <Avatar alt="Image" src={params.value} sx={{ width: 50, height: 50 }} />
    ),
  },
  { field: "name", headerName: "Coins", width: 130 },
  {
    field: "current_price",
    headerName: "Price",
    width: 100,
    valueGetter: (params) => {
      if (!params.value) {
        return params.value;
      }
      return `$${params.value}`;
    },
  },
  {
    field: "price_change_24h",
    headerName: "24 Hr",
    width: 100,
    // 修正为正确的驼峰属性名renderCell
    renderCell: (params) => {
      return (
        <Typography variant="body1" sx={{ color: "green" }}>
          {params.value.toFixed(1)} %
        </Typography>
      );
    },
  }
];

<DataGrid
  rows={cryptoData}
  columns={columns}
  initialState={{
    pagination: {
      paginationModel: { page: 0, pageSize: 50 },
    },
  }}
  pageSizeOptions={[50, 100, 200]}
  checkboxSelection
/>

额外排查项 #

如果修正后仍未生效，可检查以下内容：

• 确认cryptoData中的image字段是完整有效的图片URL（需包含http/https前缀），可通过console.log(params.value)验证
• 确保已正确导入Avatar和Typography组件
• 若使用MUI X Data Grid旧版本（v4及以前），需使用render属性而非renderCell，建议升级到最新稳定版

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