Angular前端如何显示NestJS服务器存储的产品图片？

问题分析 #

图片已成功上传至NestJS的localhost:3000/assets/目录，产品其他信息正常展示，但前端无法加载图片。直接使用src="{{result.coverimage}}"或[src]="result.coverimage"会指向Angular的localhost:4200/assets/路径，导致404错误；使用src="http://localhost:3000/{{ result.coverimage }}"也未生效。

解决方案 #

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

NestJS默认不会暴露本地目录给外部访问，需要手动配置静态资源服务，让前端能访问到assets目录下的图片。修改main.ts：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  // 开启跨域（Angular和Nest端口不同必须配置）
  app.enableCors();
  // 暴露assets目录，设置访问前缀为/assets
  app.useStaticAssets(join(__dirname, '..', 'assets'), {
    prefix: '/assets/',
  });
  await app.listen(3000);
}
bootstrap();

注意：join(__dirname, '..', 'assets')要匹配你实际的assets目录位置，如果assets在项目根目录则无需调整，若在src子目录需修改路径。

2. 确认数据库存储的图片路径格式 #

检查后端返回的coverimage字段值：

• 如果存储的是纯文件名（如book_cover.jpg），前端需要拼接/assets/前缀；
• 如果存储的是完整相对路径（如assets/book_cover.jpg），直接拼接域名即可。

3. 前端正确绑定图片URL #

使用Angular的属性绑定[src]拼接完整路径，避免插值表达式的潜在问题：

<img
  class="image"
  [src]="'http://localhost:3000/assets/' + result.coverimage"
  alt="{{ result.name }} 封面"
  height="400px"
  width="250px"
  style="border: 1px solid red"
/>

若coverimage已包含assets/前缀，修改为：

[src]="'http://localhost:3000/' + result.coverimage"

4. 验证静态资源配置 #

在浏览器地址栏直接访问图片URL（如http://localhost:3000/assets/book_cover.jpg），如果能正常显示图片，说明后端配置生效；若无法访问，检查目录路径、权限或跨域配置。

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