How to show base64 image with ImageField of react-admin?
I used following code but it is not work:
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>
);
Thanks for reading everyone!
You've used ImageField
incorrectly. The source
property of ImageField
refers to a key in a record, and this behaves like a pointer in C.
In the following example, the record is { id: 123, url: 'cat.png', title: 'meow' }
.
ImageField will lookup a value in the record by key url
and use that value cat.png
for the src of the .
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' }
<div>
<img src="cat.png" title="meow" />
</div>
This demo shows a cat with ImageField in the page.
ImageField demo