如何用Node.js从数据库展示图片？遇乱码与无令牌报错

问题根源 #

1. 身份验证缺失：直接访问API返回{"success":false,"message":"No token provided"}，说明目标接口要求携带身份验证Token，但你的请求中未传递，导致接口拒绝返回有效数据。
2. 二进制数据解析错误：返回的大量问号是因为图片二进制数据被默认按字符串（UTF-8编码）解析，非文本的二进制字节无法被正确解码，最终显示为乱码问号。

解决方案 #

1. 给API请求添加身份验证Token #

修改MemberService.getmemberprofileimage方法，在请求头中携带接口要求的Token（通常为Authorization头，格式根据接口规则调整）：

// 假设MemberService基于axios封装，调整请求逻辑
getmemberprofileimage(filename) {
  // 从本地存储或业务逻辑中获取有效Token
  const authToken = localStorage.getItem('userToken');
  return axios.get(`/api/your-image-endpoint/${filename}`, {
    headers: {
      // 替换为接口要求的Token格式，比如Bearer Token或自定义token字段
      'Authorization': `Bearer ${authToken}`
    },
    // 关键：指定返回类型为二进制Blob，避免解析乱码
    responseType: 'blob'
  });
}

2. 正确处理图片二进制数据并生成可展示URL #

修改你的getImage方法，将返回的Blob数据转换为浏览器可识别的Object URL，用于图片展示：

async getImage(){
  try {
    const res = await MemberService.getmemberprofileimage('1667546872110-agape-1667546868823.jpeg');
    if(res.status === 200 && res.data.success !== false){
      // 将Blob转换为可直接用于img标签src的URL
      this.gImage = URL.createObjectURL(res.data);
      console.log('生成的图片URL:', this.gImage);
    }
  } catch (error) {
    console.error('获取图片失败:', error);
  }
}

3. 资源清理（可选但推荐） #

当组件销毁或不再需要图片时，释放Object URL资源避免内存泄漏：

// 以Vue组件为例，在销毁钩子中执行清理
beforeUnmount() {
  if(this.gImage){
    URL.revokeObjectURL(this.gImage);
  }
}

验证 #

完成修改后，请求会携带有效Token通过接口验证，同时正确获取图片二进制数据并转换为可展示的URL，页面中img标签使用this.gImage作为src即可正常显示图片。

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