base64 encoded image not dispaying in material ui CardMedia

Question

hi im trying to implement material ui card component

 <CardMedia
                        className={classes.media}
                        title="Contemplative Reptile"
                     src={'data:image/jpeg;base64,/9j/4AAQSkZJRgAtXpVp8YbaRdxnam/SvPJ/>

im trying to display the image in base64 encoded string format but image is not rendering

Answer 1

I just came across this problem myself and resolved it by setting the component prop on the CardMedia component to img and by using the src prop instead of the img prop:

<CardMedia component='img' src={`data:image/png;base64, ${encodedImg}`} />