如何從 URL/API 獲取 base64 編碼圖像（字符串）並顯示在 ImageField 或 react-admin 列表或顯示頁面中

Question

我設計了一個帶有 react-admin (v3.5.2) 的簡單管理應用程序，其中包含大約 10 個表和 API 調用。 我對大多數菜單使用 dataprovider，除了一些 fetch 調用來獲取自定義數據。

其中一個菜單顯示產品列表，並具有一些標准類別、類型、描述，另一個具有 URL 圖像。 這個想法是用圖像展示產品。 但是我無法解決這個問題，需要在 S3 存儲桶上獲取存儲為 base64 字符串的圖像，然后在每個產品旁邊的網頁上顯示。

一個簡單的 ImageField 不起作用，因為它無法轉換為 base64 圖像（我認為）。 此外，這並沒有太大幫助，因為 imageUrl 實際上是從具有一對多關系的不同表中獲取的
<ImageField source="imageUrl" title="Image"/>

我還嘗試將它放在 SimpleShowLayout 中的自定義網格中，但我不確定如何從 API 獲取詳細信息。 網格的 Rest 僅從記錄中填充

const Vehiclepartdet = ({ record }) => (
    <span>
        <Grid container>
            <Grid xs={12} sm={2}>
                Make <br /> {record.category}
            </Grid>
            <Grid xs={12} sm={2}>
                Part <br /> {record.desc}
            </Grid>
            <Grid xs={12} sm={2}>
                Image <br /> <img src={"data:image/jpeg;base64," + ImageData} />
            </Grid>
        </Grid>
    </span>

產品

產品編號
產品分類
產品描述

產品圖片

圖片編號
image1 url
image2 url
image3 url
產品編號

我對這一切都很陌生-react-admin，reactjs 和一切都反應了，這一切才幾天前，希望這個問題有意義！

Answer 1

您必須傳遞您的圖像字符串來格式化您的 Data:URI

const encoded = "iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAwFBMVEXm7NK41k3w8fDv7+q01Tyy0zqv0DeqyjOszDWnxjClxC6iwCu11z6y1DvA2WbY4rCAmSXO3JZDTxOiwC3q7tyryzTs7uSqyi6tzTCmxSukwi9aaxkWGga+3FLv8Ozh6MTT36MrMwywyVBziSC01TbT5ZW9z3Xi6Mq2y2Xu8Oioxy7f572qxzvI33Tb6KvR35ilwTmvykiwzzvV36/G2IPw8O++02+btyepyDKvzzifvSmw0TmtzTbw8PAAAADx8fEC59dUAAAA50lEQVQYV13RaXPCIBAG4FiVqlhyX5o23vfVqUq6mvD//1XZJY5T9xPzzLuwgKXKslQvZSG+6UXgCnFePtBE7e/ivXP/nRvUUl7UqNclvO3rpLqofPDAD8xiu2pOntjamqRy/RqZxs81oeVzwpCwfyA8A+8mLKFku9XfI0YnSKXnSYZ7ahSII+AwrqoMmEFKriAeVrqGM4O4Z+ADZIhjg3R6LtMpWuW0ERs5zunKVHdnnnMLNQqaUS0kyKkjE1aE98b8y9x9JYHH8aZXFMKO6JFMEvhucj3Wj0kY2D92HlHbE/9Vk77mD6srRZqmVEAZAAAAAElFTkSuQmCC";
const Vehiclepartdet = ({ record }) => (
<span>
    <Grid container>
        <Grid xs={12} sm={2}>
            Make <br /> {record.category}
        </Grid>
        <Grid xs={12} sm={2}>
            Part <br /> {record.desc}
        </Grid>
        <Grid xs={12} sm={2}>
            Image <br /> <img src={`data:image/png;base64, ${encoded}`} />
        </Grid>
    </Grid>
</span>
)