如何从 URL/API 获取 base64 编码图像（字符串）并显示在图像字段或 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如何从 URL/API 获取 base64 编码图像（字符串）并显示在图像字段或 react-admin 列表或显示页面中
【发布时间】：2020-05-23 10:21:46
【问题描述】：

我用 react-admin (v3.5.2) 设计了一个简单的管理应用程序，其中包含大约 10 个表和 API 调用。我对大多数菜单使用 dataprovider，除非调用一些 fetch 调用来获取自定义数据。

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

一个简单的 ImageField 不起作用，因为它无法转换为 base64 图像（我认为）。此外，这并没有太大帮助，因为 imageUrl 实际上是从具有一对多关系的不同表中获取的
<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>

产品

产品编号
产品类别
产品说明

产品图片

图片ID
image1 网址
image2 网址
image3 网址
产品编号

我对这一切都很陌生——react-admin、reactjs 和一切都反应了，这一切才几天前，希望这个问题有意义！

【问题讨论】：

标签： reactjs react-admin

【解决方案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>
)

【讨论】：