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

Question

我设计了一个带有react-admin（v3.5.2）的简单Admin应用程序，其中包含大约10个表和API调用。我将dataprovider用于大多数菜单，除非有几个访存调用来访存定制数据。

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

一个简单的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>

产品

产品编号产品分类产品说明

产品图片

图像IDimage1网址image2网址image3网址产品编号

我对这一切还是很陌生的-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/jpeg;base64," + encoded} />
        </Grid>
    </Grid>
</span>
)