React.js：如何在react-admin的ImageField组件中展示base64格式图片

你当前代码不生效的核心原因是错用了ImageField的source属性：source仅接受数据源中对应存储图片内容的字段名称，不支持直接填写完整base64链接或拼接规则。

场景1：数据源字段已包含完整base64前缀 #

如果你的接口返回的记录中，存储图片的字段已经自带data:image/[格式];base64,前缀，直接将该字段名赋值给source即可：

<ImageField source="你的base64字段名" />

场景2：数据源字段仅包含纯base64编码内容 #

如果字段中只有无前缀的纯base64内容，需要通过src属性自定义拼接前缀：

<ImageField 
  // source仍填写存储base64的字段名，用于组件内部标识、排序等逻辑
  source="你的纯base64字段名"
  // 自定义拼接完整图片链接
  src={(record) => `data:image/png;base64,${record.你的纯base64字段名}`}
/>

完整修正代码示例 #

import * as React from "react";
import { List, Datagrid, TextField, ImageField} from 'react-admin';

export const RequestList = props => (
    <List {...props} >          
        <Datagrid>
           <TextField source="id" />
           {/* 适配场景1的写法 */}
           <ImageField source="myBase64Img" />
           {/* 适配场景2的写法，按需二选一即可
           <ImageField 
               source="myBase64Img"
               src={record => `data:image/png;base64,${record.myBase64Img}`}
           /> */}
        </Datagrid>
    </List>
);

补充说明 #

如果你的图片格式不是png，将拼接前缀中的image/png替换为对应图片的MIME类型即可，比如jpg格式改为image/jpeg。

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