Angular项目中mat-card组件内资料图片无法显示仅展示alt文本问题

问题原因与解决方案 #

图片加载失败核心是静态资源路径配置不符合Angular的编译规则，按以下步骤排查修复即可：

• 修正路径格式与写法
  Angular项目中assets目录是预设的静态资源根目录，编译后会直接映射到部署服务的根路径，无需使用../相对路径回溯，同时Web标准要求路径分隔符使用正斜杠/，不能用Windows系统的反斜杠\。直接把img标签的src属性修改为：src="/assets/images/signupbg.jpg"
• 确认资源文件存在
  检查你的项目src目录下是否存在assets/images/signupbg.jpg文件，注意文件名大小写敏感，避免拼写错误。
• 验证资源配置
  打开项目根目录的angular.json文件，确认build选项下的assets数组包含src/assets配置，确保assets目录会被纳入编译产出：

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

• 排查样式冲突
  临时给img标签添加行内样式<img mat-card-image src="/assets/images/signupbg.jpg" alt="Avatar" class="avatar" style="width: 120px;height: 120px;">测试，排除.avatar类或者mat-card-image默认样式导致的图片隐藏问题。

修正后的完整代码 #

<div class="row">
  <div class="col-md-4 col-6">
    <mat-card class="example-card">
      <img mat-card-image src="/assets/images/signupbg.jpg" alt="Avatar" class="avatar">
      <mat-card-header>
        <div style="text-align:center;">
          <mat-card-title>Samanthika Rajapaksa</mat-card-title>
          <mat-card-subtitle>University of Moratuwa</mat-card-subtitle>
        </div>
      </mat-card-header>
      <mat-card-content>
        <mat-chip-list aria-label="Languages">
          <mat-chip color="primary" selected>Networking</mat-chip>
          <mat-chip color="primary" selected>Angular</mat-chip>
          <mat-chip color="primary" selected>Aws</mat-chip>
          <mat-chip color="primary" selected>Spring Boot</mat-chip>
          <mat-chip color="primary" selected>My SQL</mat-chip>
        </mat-chip-list>
      </mat-card-content>
    </mat-card>
  </div>
</div>

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