使用Angular+Node.js向MySQL存blob图片成功但无法显示，如何解决？

1 插入环节排查 #

先确认数据存储阶段没有异常：

• 确认MySQL存储图片的字段类型容量足够，不要使用最大仅支持255KB的TINYBLOB，可根据图片体积选择BLOB(最大64KB)、MEDIUMBLOB(最大16MB)、LONGBLOB(最大4GB)
• 检查你代码中的qrSQL语句，确认已将转换好的base64data写入了对应图片字段，没有误存文件路径、空值等错误内容
• 插入成功后直接查询数据库对应字段值，确认存储的是完整合法的base64字符串，没有出现截断、多余转义字符等问题

2 后端查询接口排查 #

你前端调用的http://localhost:5000/image接口需要符合以下要求：

• 接口返回的图片字段值要和数据库中存储的base64字符串完全一致，没有被Node层二次转义
• 返回JSON响应时保持默认Content-Type: application/json即可，不要设置为二进制流类型

3 前端渲染环节修复 #

你当前的代码存在多处明显错误，按以下步骤修改：

3.1 TS逻辑修正 #

你声明了FileReader但完全没有使用，同时赋值的变量和模板中调用的变量不匹配，修改为：

// 先导入安全地址处理工具
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

export class YourComponent {
  us: any = {image: {}}
  // 构造函数注入DomSanitizer，解决Angular安全拦截问题
  constructor(private sanitizer: DomSanitizer) {}

  display(){
    this.http.get('http://localhost:5000/image').subscribe((res:any)=>{
      console.log(res);
      // 把数据库返回的base64字段值替换下方的「图片存储字段名」
      const base64Str = res.response[0].图片存储字段名;
      this.us.image.url = this.sanitizer.bypassSecurityTrustUrl(`data:image/png;base64,${base64Str}`);
    })
  }
}

注意：如果你的图片是JPG/GIF等格式，把image/png替换为对应image/jpeg/image/gif即可，不确定格式可以写image/*

3.2 模板代码修正 #

修改img标签的src绑定方式：

<td><img height="50" width="50" [src]="us.image.url"></td>

4 可选优化（存储原生Blob而非Base64） #

Base64格式会比原生二进制体积大33%，如果想要节省存储空间可以直接存二进制Blob：

• 插入时直接把fs.readFileSync返回的Buffer存到Blob字段，不需要转base64
• 查询接口直接返回二进制流，设置响应头Content-Type为对应图片格式
• 前端请求时指定响应类型即可：

this.http.get('http://localhost:5000/image', {responseType: 'blob'}).subscribe(blob => {
  this.us.image.url = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(blob));
})

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