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

I have designed a simple Admin application with react-admin (v3.5.2) with about 10 tables and API calls. I use the dataprovider for most of the menus, barring a few fetch calls to fetch custom data.

One of the menus displays a list of products and has some standard categories, type, description and another has URL images. The idea is to display products with images. However I have not been able to resolve this, the requirement to fetch images stored as base64 string on an S3 bucket and display then on the webpage alongside each product.

A simple ImageField does not work since it is unable to convert to base64 image (I think). Moreover this doesn't help much since the imageUrl is actually fetched from a different table with a one to many relation
<ImageField source="imageUrl" title="Image"/>

I also tried to put it in a custom Grid inside SimpleShowLayout, but I am not sure how to get the details from API. Rest of the grid is populated simply from record

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>

Product

product id
product category
product desc

Product Images

image id
image1 url
image2 url
image3 url
product id

I am quite new to all this - react-admin, reactjs and everything react, just few days old into all this, hope that the question makes sense!

Solution

You have to pass your image string to format your 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>
)