ReactJS如何展示从本地数据库读取的Blob格式图片数据

问题原因 #

返回的{type: 'Buffer', data: Array(50639)}是Node.js的二进制缓冲区对象，img标签的src属性无法直接识别该格式，需要转换为Base64编码的Data URL才能正常显示。

方案1：后端预处理返回（推荐） #

直接在服务端将Buffer转换为Base64格式返回，前端无需额外处理，性能更优。
修改服务端代码如下：

app.get("/api/getAvailableProjects", (req, res) => {
    // 修正原SQL多余的逗号语法问题
    const sqlQuery = "SELECT * from projectdetail";
    db.query(sqlQuery, (_error, result) => {
        const processedResult = result.map(item => {
            // 按实际图片格式替换image/png，如image/jpeg、image/gif等
            const base64Image = `data:image/png;base64,${item.PROJECT_IMAGE.toString('base64')}`;
            return {...item, PROJECT_IMAGE: base64Image};
        });
        res.send(processedResult);
    });
});

修改后前端原有代码无需调整，图片可直接正常渲染。

方案2：前端自行转换 #

如果不便修改后端代码，可在前端直接处理Buffer数据：
修改React中img标签的src属性逻辑即可：

{projectCard.map((val) => {
    // 将Buffer转换为Base64 DataURL
    const imageSrc = `data:image/png;base64,${btoa(String.fromCharCode(...new Uint8Array(val.PROJECT_IMAGE.data)))}`;
    return (
        <div className="col-lg-3 col-md-6 mb-2" key={val.PROJECT_ID}>
            <img id="project-img" src={imageSrc} className="img-fluid" />
        </div>
    );
})}

注意事项 #

• 请根据图片实际存储格式替换data:image/png中的格式标识，若图片格式不固定，建议新增字段存储图片格式到数据库，动态拼接前缀兼容性更好。
• 若图片体积较大，不建议长期存储在数据库中，可将图片存到本地静态资源目录或云存储服务，数据库仅存储图片访问路径，能大幅提升接口响应和页面加载性能。

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