如何从 URL/API 中获取 base64 编码的图像（字符串）并显示在 ImageField 或 react-admin 列表或显示页面上

Question

我用 react-admin (v3.5.2) 设计了一个简单的管理应用程序，大约有 10 tables 和 API 调用。我为大多数菜单使用数据提供程序，除了一些获取自定义数据的获取调用。

其中一个菜单显示了产品列表并具有一些标准类别、类型、描述，另一个菜单具有 URL 个图像。这个想法是用图像显示产品。但是我无法解决这个问题，要求获取在 S3 存储桶中存储为 base64 字符串的图像，然后在每个产品旁边的网页上显示。

一个简单的 ImageField 不起作用，因为它无法转换为 base64 图像（我认为）。此外，这并没有太大帮助，因为 imageUrl 实际上是从具有一对多关系
的另一个 table 获取的 <ImageField source="imageUrl" title="Image"/>

我也尝试将它放在 SimpleShowLayout 中的自定义网格中，但我不确定如何从 API 中获取详细信息。网格的其余部分仅从记录

填充

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>

产品

产品编号
产品类别
产品描述

产品图片

图片编号
图片 1 url
图片2 url
图片3 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>
)

如何从 URL/API 中获取 base64 编码的图像（字符串）并显示在 ImageField 或 react-admin 列表或显示页面上

How can I fetch base64 encoded images (string) from a URL/ API and display in ImageField or on react-admin list or show page

reactjs

react-admin

产品

产品图片