Angular项目中如何正确显示MongoDB返回数据对应的本地图片

问题根因 #

• 接口返回的bookImage、bookFile字段不是字符串，是Multer存储文件后返回的嵌套对象，直接把对象拼接到图片路径里会得到[object Object]，自然无法加载资源。
• 模板中写的../../../assets/images/多级相对路径不可靠，Angular构建时assets目录是全局静态资源根目录，不需要按组件层级写相对路径。
• BooksModel类型定义和实际接口返回结构不匹配，把对象类型的字段错定义为字符串，容易引发取值异常。

修复步骤 #

1. 确认图片文件名字段
   展开控制台打印的单条书籍数据里的bookImage对象，Multer默认配置下，存储到本地的实际文件名字段为filename，后续取这个字段的值拼接路径即可。

2. 修正数据模型定义
   替换原来的BooksModel代码，匹配接口实际返回的嵌套结构：

// 对应Multer返回的文件对象结构
export class UploadedFileModel {
  constructor(
    public fieldname: string,
    public originalname: string,
    public encoding: string,
    public mimetype: string,
    public destination: string,
    public filename: string, // 本地存储的实际文件名
    public path: string,
    public size: number
  ){}
}

export class BooksModel{
   constructor(
       public bookName: string,
       public bookAuthor: string,
       public bookCategory: string,
       public bookDescription: string,
       public bookImage: UploadedFileModel,
       public bookFile: UploadedFileModel,
       public _id?: string
   ){}
}

3. 修正模板图片绑定逻辑
   用Angular属性绑定写法写src路径，直接从静态资源根路径寻址，不要写多级相对路径，同时修正原模板重复写style属性的问题：

<tr *ngFor='let book of books'>
   <td>{{ book.bookName }}</td>
   <td>
      <img 
        class="rounded-circle mt-5" 
        [src]="'assets/images/' + book.bookImage.filename" 
        name="photo"
        alt="书籍封面"
      >
   </td>
   <td>{{ book.bookAuthor }}</td>
   <td>{{ book.bookCategory }}</td>
   <td>{{ book.bookDescription }}</td>
   <td>
      <button class="btn btn-success" style="cursor:pointer; margin-right: 20px;">Read</button>
   </td>
   <td>
      <button class="btn btn-warning" style="cursor:pointer; margin-right: 20px;"> Edit</button>
      <button class="btn btn-danger" style="cursor:pointer;"> Delete</button>
   </td>
</tr>

4. 校验静态资源配置
   打开项目根目录的angular.json文件，确认build配置下的assets数组包含了assets目录，默认配置如下即可：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

注意：不要把用户上传的文件存在Angular项目的assets目录下，每次执行构建命令时，assets目录的内容会被构建产物覆盖，容易丢失上传的文件。建议在项目根目录单独创建upload文件夹存储上传资源，后端配置静态资源路由指向该文件夹，前端直接访问映射后的静态地址即可。

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