base64 编码图像未显示在材质 ui CardMedia 中答案

【问题标题】：base64 encoded image not dispaying in material ui CardMediabase64 编码图像未显示在材质 ui CardMedia 中
【发布时间】：2020-10-15 22:27:32
【问题描述】：

你好，我正在尝试实现材质 ui 卡片组件

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

我试图以 base64 编码字符串格式显示图像，但图像未呈现

【问题讨论】：

您确定您的图片已正确编码为 base64 吗？顺便说一句，我不确定您是否可以在 CardMedia 中使用 base64 编码图像
是的，出于隐私目的，我删除了消息
我认为一个不错的选择是使用类似 url('data:image/jpeg;base64...") }} /> 我知道，是不是您正在寻找的解决方案，但我认为这是解决它的简单方法

标签： reactjs material-ui

【解决方案1】：

我自己也遇到了这个问题，并通过将CardMedia 组件上的component 属性设置为img 并使用src 属性而不是img 属性来解决它：

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

【讨论】：