Angular前端无法显示Express后端bytea格式图片求助

近2-3天我尝试将Express后端返回的图片数据在Angular前端渲染显示。我的Express后端包含id、image_1、image_2、image_3字段，其中图片以bytea格式存储。我能从后端获取到buffer数组，但在前端无法将其显示为图片。

Angular HTML代码 #

<div class="testName">
    place tosho image
    <div >
      <img [src]="image_1_url" alt="">
      <!-- <img [src]="bufferToBase64(image)" alt="Banner Image" /> -->
    </div>
  </div>

Angular Component.ts代码 #

ngOnInit(): void {

    // to print only path eg:"/login"

    this.fetchImagesFromServer().subscribe( (data) => {
      this._imagesData = data
      console.log('image 1 data', this._imagesData.data[0].image_1);
      
      this.displayImage(new Uint8Array(this._imagesData.data[0].image_1.data))
    }, error => { 
      console.error('Error in fetching', error);
     })

    console.log('image_1', this.image_1_url);
    
  }

  fetchImagesFromServer(): Observable<any> {
    const url = 'http://localhost:3000/src/vista-v1/admin/image';
 
    const params = new HttpParams()
      .set('id', 'ea8bebdc-34d3-41b7-9bba-77fbd51ec3ef')
      .set('category', 'Facility');
 
    return this.http.get<any>(url, { params });
  }


  displayImage(imageData: ArrayBuffer): void {
    if (imageData) {
      const uint8Array = new Uint8Array(imageData)
      const imageUrl = this.bufferToUrl(uint8Array);
      this.image_1_url = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
      // this.image_1_url = imageUrl;

      console.log('Image url 1', this.image_1_url);
      
    }
  }

  bufferToUrl(image: Uint8Array): any {
    if (image) {
      const blob = new Blob([image], { type: 'image/jpeg'})
      const imageUrl = URL.createObjectURL(blob)
      return imageUrl
    }

    return ''
  }

  bufferToBase64(image: ArrayBuffer): any {
    let binary = ''
    const bytes  = new Uint8Array(image)
    for(let i = 0; i < bytes.byteLength; i++) {
      binary += String.fromCharCode(bytes[i])
    }

    console.log('BINATRY DATA IS THIS', binary);
    return'data:image/jpeg;base64,' + btoa(binary)
    
  }

请问有人知道问题出在哪里，或者我需要做哪些修改才能正常显示图片？

以下是几个核心问题点和对应的修改方案：

1. 后端返回数据的格式修复 #

bytea是PostgreSQL的二进制存储类型，Express直接返回会被JSON序列化转义，导致数据损坏。两种处理方式：

• 单张图片直接返回二进制：设置正确的Content-Type，直接发送buffer

  // Express路由示例
  app.get('/src/vista-v1/admin/image', async (req, res) => {
    const { id, category } = req.query;
    const result = await db.query('SELECT image_1 FROM your_table WHERE id = $1 AND category = $2', [id, category]);
    if (result.rows.length > 0) {
      const imageBuffer = result.rows[0].image_1;
      res.set('Content-Type', 'image/jpeg'); // 根据实际图片格式调整
      res.send(imageBuffer);
    } else {
      res.sendStatus(404);
    }
  });
  

• 返回包含多张图片的JSON：将bytea转为base64字符串后返回，前端直接使用data:image/jpeg;base64,xxx格式

  // Express返回JSON示例
  const imageBase64 = result.rows[0].image_1.toString('base64');
  res.json({ data: [{ image_1: imageBase64 }] });
  

2. 前端请求响应类型设置 #

如果后端返回原始二进制buffer，前端必须设置responseType: 'arraybuffer'，避免默认JSON解析破坏数据：

fetchImagesFromServer(): Observable<ArrayBuffer> {
  const url = 'http://localhost:3000/src/vista-v1/admin/image';
  const params = new HttpParams()
    .set('id', 'ea8bebdc-34d3-41b7-9bba-77fbd51ec3ef')
    .set('category', 'Facility');
  return this.http.get(url, { params, responseType: 'arraybuffer' });
}

3. 图片格式匹配 #

确保bufferToUrl中设置的type与实际图片格式一致（比如PNG用image/png），否则浏览器无法解析。可以在后端存储时记录图片格式，或者尝试自动检测。

4. 简化前端渲染逻辑 #

• 若后端返回base64，直接拼接后使用：

  this.fetchImagesFromServer().subscribe( (data) => {
    this.image_1_url = this.sanitizer.bypassSecurityTrustUrl(`data:image/jpeg;base64,${data.data[0].image_1}`);
  });
  

• 若用ArrayBuffer方式，避免重复转换Uint8Array：

  displayImage(imageData: ArrayBuffer): void {
    const blob = new Blob([imageData], { type: 'image/jpeg' });
    const imageUrl = URL.createObjectURL(blob);
    this.image_1_url = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
  }
  
  // 订阅时直接传递原始ArrayBuffer
  this.displayImage(this._imagesData.data[0].image_1.data);
  

5. 调试技巧 #

• 复制控制台中的image_1_url到新标签页打开，判断是URL生成问题还是数据本身损坏
• 检查后端返回的buffer长度是否合理，若长度异常，说明后端查询或返回过程出错

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