React.js: 如何用react-admin的ImageField显示base64图片

Question

如何使用react-admin的ImageField显示base64图片？

我使用了以下代码，但它不起作用：

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


export const RequestList = props => (
    <List {...props} >          

        <Datagrid  >
            
           <TextField source="id" />
         
           <ImageField  source={`data:image/png;base64,myBase64Img`}  />
                    
        </Datagrid>
    </List>
);

感谢大家阅读！

Answer 1

您使用 ImageField 不正确。 ImageField 的 source 属性指的是记录中的一个键，它的行为类似于 C 中的指针。

在下面的例子中，记录是{ id: 123, url: 'cat.png', title: 'meow' }。 ImageField 将通过键 url 在记录中查找一个值，并将该值 cat.png 用于 .

的 src

来源

import { ImageField, TextField } from "react-admin";
import data from "./data";

<ImageField record={data} source="url" title="title" />
// data = { id: 123, url: 'cat.png', title: 'meow' }

渲染后输出html

<div>
    <img src="cat.png" title="meow" />
</div>

此演示在页面中展示了一只带有 ImageField 的猫。
ImageField demo

Answer 2

我只是直接将base64 字符串扔到img 标签的src 字段中，而不是使用ImageField。有点像这样

<img src={yourBase64String} title="image" style={{ height: 30 }} />

React.js: 如何用react-admin的ImageField显示base64图片

React.js: How to show base64 image with ImageField of react-admin

reactjs

react-admin

imagefield

来源

渲染后输出html