如何在React中展示MongoDB中以Buffer字符串形式存储的图片

• Schema字段定义错误：buffer字段配置的类型为String，不符合Mongoose存储二进制图片的要求，额外添加的data属性无实际作用。
• 前端img的src属性无法直接识别原始二进制流，需要传入标准的Data URL格式字符串或者可直接访问的图片资源接口地址。

步骤1：修正Schema定义 #

const PictureSchema = new mongoose.Schema({
  type: {
    type: String,
    required: 'Type of image required'
  },
  name: {
    type: String,
    required: 'Image name is required'
  },
  buffer: {
    type: Buffer, // 替换为Buffer类型
    required: 'Image requires buffer'
  },
})

注意：如果已经有存量数据，需要把原有存储的字符串格式二进制数据转为Buffer类型重新入库，否则后续编码会出现乱码。

步骤2：后端接口处理返回格式 #

查询到图片数据后，将Buffer转为base64编码并拼接Data URL前缀再返回给前端：

// 示例接口
app.get('/image/:id', async (req, res) => {
  const imageDoc = await PictureModel.findById(req.params.id)
  const processedImage = {
    ...imageDoc.toObject(),
    buffer: `data:image/${imageDoc.type};base64,${imageDoc.buffer.toString('base64')}`
  }
  res.json(processedImage)
})

步骤3：前端直接使用返回的buffer字段 #

无需修改现有前端代码，直接赋值给src即可：

<Avatar alt={image.name} src={image.buffer} />

这种方案不需要转base64，资源体积更小，加载速度更快：

步骤1：同样先修正Schema定义，和解决方案1的步骤1一致。 #

步骤2：编写返回图片流的接口 #

app.get('/image/:id', async (req, res) => {
  const imageDoc = await PictureModel.findById(req.params.id)
  // 设置正确的响应内容类型
  res.setHeader('Content-Type', `image/${imageDoc.type}`)
  // 直接返回二进制Buffer
  res.send(imageDoc.buffer)
})

步骤3：前端修改src为接口地址 #

<Avatar alt={image.name} src={`/image/${image._id}`} />

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