基于Node.js搭建REST API从PostgreSQL数据库提供图片至浏览器的实现问题

我懂你现在的困惑！之前把图片转成data URL嵌在HTML里能正常显示，换成纯REST API就出问题了，核心原因是你当前的响应头和发送的内容不匹配——你告诉浏览器这是image/png格式的二进制图片，但实际发送的是字符串格式的data URL，浏览器自然解析失败。

下面给你两种可行的解决方案，根据你的需求选择即可：

方案一：直接返回二进制图片（推荐，符合REST API返回资源的常规做法） #

这种方式不需要把图片转成base64，直接发送数据库里存储的二进制buffer即可，浏览器会自动识别并渲染图片：

app.get('/', async(req,res) => { 
  try { 
    const query = await pool.query("SELECT * FROM picture"); 
    const imageBuffer = query.rows[0].image;
    // 如果数据库里存了图片的mimeType，优先用这个（比如从picture表的mimetype字段取）
    // const mimeType = query.rows[0].mimetype;
    // res.setHeader('Content-type', mimeType);
    // 如果没存固定用image/png也可以
    res.setHeader('Content-type', 'image/png'); 
    res.send(imageBuffer); // 直接发送二进制buffer
  } catch (e) { 
    console.log(e.message);
    res.status(500).send('获取图片失败');
  } 
})

这样前端直接把API地址设为img的src就能显示，比如<img src="http://你的API地址/" />，完全不需要额外处理。

方案二：返回data URL字符串（如果业务需要返回字符串格式） #

如果你确实需要返回data URL格式的字符串，那要修改响应头，告诉浏览器这是文本内容，而不是二进制图片：

app.get('/', async(req,res) => { 
  try { 
    const query = await pool.query("SELECT * FROM picture"); 
    const buff = query.rows[0].image; 
    const b64 = buff.toString('base64'); 
    const src = `data:image/png;base64,${b64}`; 
    // 设置响应头为文本类型
    res.setHeader('Content-type', 'text/plain'); 
    // 或者如果要返回JSON格式，就用application/json
    // res.json({ imageSrc: src });
    res.send(src); 
  } catch (e) { 
    console.log(e.message);
    res.status(500).send('获取图片失败');
  } 
})

这种情况下，前端拿到字符串后，可以直接赋值给img的src：

// 前端示例（fetch为例）
fetch('http://你的API地址/')
  .then(res => res.text())
  .then(src => {
    const img = document.createElement('img');
    img.src = src;
    document.body.appendChild(img);
  });

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