如何将MS SQL Server 2012中Image类型图片加载到Node.js服务端并在客户端img标签渲染

前置准备 #

首先安装Node.js连接SQL Server的依赖包：

npm install mssql

方案1：Base64编码传递（适合100KB以下小图片） #

Image类型在SQL Server中存储的是二进制流，通过mssql包查询后会直接返回Node.js原生Buffer对象，转成Base64后可直接传递给前端使用。

服务端核心代码示例 #

const sql = require('mssql')

// 数据库配置
const dbConfig = {
  user: '你的数据库用户名',
  password: '你的数据库密码',
  server: '数据库地址',
  database: '数据库名',
  options: {
    encrypt: false, // 本地测试可关闭，线上按需开启
    trustServerCertificate: true
  }
}

async function getImageFromDB(imageId) {
  let conn = null
  try {
    conn = await sql.connect(dbConfig)
    const result = await sql.query`SELECT image_content FROM your_table WHERE id = ${imageId}`
    // 取出Image类型对应的Buffer
    const imageBuffer = result.recordset[0].image_content
    // 转Base64，注意补充对应图片的MIME前缀，常见的有image/png、image/jpeg、image/gif
    // 如果不知道图片格式，可使用file-type包检测Buffer的MIME类型
    const base64Img = `data:image/jpeg;base64,${imageBuffer.toString('base64')}`
    return base64Img
  } catch (err) {
    console.error('查询失败：', err)
  } finally {
    if (conn) conn.close()
  }
}

服务端可以直接将返回的base64字符串通过接口返回给前端。

前端渲染逻辑 #

拿到Base64字符串后直接赋值给<img>标签的src属性即可：

<!-- 原生JS示例 -->
<img id="targetImg" alt="加载的图片">
<script>
  fetch('/你的接口地址')
    .then(res => res.text())
    .then(base64Str => {
      document.getElementById('targetImg').src = base64Str
    })
</script>

方案2：流式接口返回（适合大图片，性能更优） #

Base64会让数据体积增大33%左右，大图片建议直接返回二进制流，前端直接用接口地址作为图片源。

服务端核心代码示例（以Express框架为例） #

const express = require('express')
const sql = require('mssql')
const app = express()

// 数据库配置和上面一致，此处省略

app.get('/getImage/:id', async (req, res) => {
  let conn = null
  try {
    conn = await sql.connect(dbConfig)
    const result = await sql.query`SELECT image_content FROM your_table WHERE id = ${req.params.id}`
    const imageBuffer = result.recordset[0].image_content
    // 设置响应头为图片类型，同样可通过file-type包检测实际MIME
    res.setHeader('Content-Type', 'image/jpeg')
    // 直接返回二进制Buffer
    res.send(imageBuffer)
  } catch (err) {
    res.status(500).send('图片加载失败')
  } finally {
    if (conn) conn.close()
  }
})

app.listen(3000)

前端渲染逻辑 #

直接把接口地址填入<img>的src属性即可：

<img src="http://你的服务地址/getImage/123" alt="加载的图片">

注意事项 #

• SQL Server的Image类型已经是官方标记为废弃的类型，新业务建议使用VARBINARY(MAX)类型存储二进制数据，现有存量Image数据读取不受影响
• 如果存储的图片格式不固定，可安装file-type包，通过await fileType.fromBuffer(imageBuffer)读取Buffer的实际MIME类型，避免写死Content-Type或者Base64前缀导致图片无法渲染。

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