React中如何将JSON加载的base64字符串在img标签中正常显示？

问题原因 #

你当前的代码存在3个明显错误：

• 错误使用了URL.createObjectURL()方法：这个方法仅用于将Blob/File类型的二进制对象转为临时可访问的URL，你的base64本身已经是符合img标签src要求的Data URI格式，完全不需要调用这个方法。
• 变量引用错误：你用反引号包裹了post.base64str，等于给src传入了固定字符串"post.base64str"，而不是post对象里base64str字段的实际值。
• 可能存在多余字符：你给出的数据库存储的base64字符串前后包裹了单引号，需要确认接口返回的内容是否自带了这对多余的单引号，如果有需要先去除才能正常使用。

修复方案 #

第一步：先确认接口返回的base64格式 #

可以在fetch的回调里打印一下拿到的base64字符串，确认前后没有多余的单引号：

.then((responseJson) =>{
    // 先打印确认格式，根据你实际的posts结构调整取值
    console.log('base64内容', responseJson.data[0].base64str) 
    setPosts(responseJson.data);
})

如果打印出来的内容前后有单引号，就先处理掉：

const base64str = responseJson.data[0].base64str.replace(/^'|'$/g, '')

第二步：修改img标签的写法 #

直接把处理好的base64字符串赋值给src属性即可：

<tr>
    <td height="428">
    <p align="center"/>
    <img 
        border="0" 
        src={post.base64str} 
        width="100%" 
        height="100%" 
        className="photoMain" 
        alt="图片描述" // 建议加上alt属性符合规范
    />
    </td>
</tr>

如果你的posts是数组，需要先遍历数组再渲染每个对应的图片：

{posts.map(post => (
    <tr key={post.id}>
        <td height="428">
        <p align="center"/>
        <img 
            border="0" 
            // 确认有多余引号再加replace逻辑，没有就直接写post.base64str
            src={post.base64str.replace(/^'|'$/g, '')} 
            width="100%" 
            height="100%" 
            className="photoMain" 
            alt="上传的图片"
        />
        </td>
    </tr>
))}

内容的提问来源于stack exchange，提问作者MikeBlue