Angular 13从NestJs获取图片返回text/html无法显示求助

核心问题分析 #

前端请求图片时，NestJS服务器返回text/html类型的响应（状态码200），浏览器无法识别为图片资源，因此无法正常加载。商品详情能正常显示，说明MongoDB中的数据关联正常，问题出在图片的存储路径、后端静态文件服务配置或上传流程的处理上。

解决方案步骤 #

1. 配置NestJS静态文件服务 #

NestJS需要通过ServeStaticModule提供静态文件访问能力，确保图片路径能被正确解析并返回对应图片类型的响应。

修改app.module.ts：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'uploads'), // 指定图片存储的服务器目录（比如项目根目录下的uploads文件夹）
      serveRoot: '/uploads', // 前端访问图片的URL前缀，例如：http://localhost:3000/uploads/xxx.jpg
    }),
  ],
})
export class AppModule {}

2. 修正后端图片上传处理逻辑 #

Angular端上传的是base64编码字符串，后端需要将其转换为实际图片文件保存到服务器，并存储正确的访问路径到MongoDB。

示例NestJS上传接口（books.controller.ts）：

import { Controller, Post, Body } from '@nestjs/common';
import { createWriteStream } from 'fs';
import { join } from 'path';

@Controller('books')
export class BooksController {
  @Post('upload')
  async uploadCoverImage(@Body() body: { coverimage: string }) {
    // 剥离base64前缀，提取纯图片数据
    const base64PrefixRegex = /^data:image\/(png|jpeg|jpg);base64,/;
    const imageType = body.coverimage.match(base64PrefixRegex)[1];
    const base64Data = body.coverimage.replace(base64PrefixRegex, '');
    
    // 生成唯一文件名，避免重复
    const filename = `${Date.now()}.${imageType}`;
    const filePath = join(__dirname, '..', 'uploads', filename);
    
    // 将base64数据写入服务器文件系统
    createWriteStream(filePath).write(Buffer.from(base64Data, 'base64'));
    
    // 返回并存储到MongoDB的路径应为：uploads/xxx.jpg（对应前端访问URL）
    return { coverimage: `uploads/${filename}` };
  }
}

3. 调整Angular端上传逻辑 #

确保上传时将base64字符串传递给后端，而不是直接传递File对象：

imagedata?: string;

async uploadimage(event: any) {
  const file = event.target.files[0];
  const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/jpg'];
  
  if (file && allowedMimeTypes.includes(file.type)) {
    const reader = new FileReader();
    reader.onload = () => {
      this.imagedata = reader.result as string;
      // 将base64字符串赋值给表单字段，用于提交给后端
      this.AddbookForm.patchValue({ coverimage: this.imagedata });
      this.AddbookForm.get('coverimage')?.updateValueAndValidity();
    };
    reader.readAsDataURL(file);
  }
}

// 表单提交示例
onSubmit() {
  this.apiService.addBook(this.AddbookForm.value).subscribe({
    next: (res) => {
      console.log('书籍添加成功');
      // 刷新书籍列表或跳转页面
    },
    error: (err) => console.error('提交失败', err)
  });
}

4. 验证图片路径与前端渲染 #

• 确认MongoDB中coverimage字段存储的是类似uploads/1699999999999.jpg的正确路径，而非base64字符串或错误路径。
• 前端HTML中的图片路径保持现有写法即可，确保与后端静态服务配置匹配：

<img
  class="image"
  src="http://localhost:3000/{{ result.coverimage }}"
  alt="书籍封面"
  height="400px"
  width="250px"
  style="border: 1px solid red"
/>

5. 排查路由冲突 #

检查NestJS是否有其他路由规则匹配了图片URL（比如通配符路由返回HTML页面），导致图片请求被错误路由到HTML响应。确保静态文件服务的路由优先级高于其他自定义路由。

测试验证 #

1. 启动NestJS服务，确认uploads目录存在并具备读写权限。
2. 上传一张图片，检查uploads目录是否生成对应文件。
3. 在浏览器地址栏直接访问图片URL（如http://localhost:3000/uploads/1699999999999.jpg），查看响应头的Content-Type是否为image/jpeg（或对应图片类型），同时确认图片能正常显示。

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