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

渲染后 output html

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

該演示在頁面中顯示了一只帶有 ImageField 的貓。
ImageField 演示

Answer 2

我只是將 base64 字符串直接放在 img 標簽的 src 字段中，而不是使用 ImageField。 有點像這樣

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