reactjsreact-adminimagefield

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


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!


Solution

  • 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