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

Question

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!

Answer 1

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 .

source

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' } 

output html after rendering

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

This demo shows a cat with ImageField in the page.
ImageField demo

Answer 2

I just throw the base64 string directly in the src field of a img tag instead of using ImageField. Somewhat like this

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