Angular Material表单中如何从数据库加载并显示图片

嗨，很高兴能帮你搞定这个问题！你已经成功从后端拿到图片地址并填充到表单里了，接下来只需要把这个值绑定到img标签的src属性就可以实现图片展示，具体步骤如下：

1. 处理图片地址输入框 #

既然你不想在输入框里显示图片地址，最直接的方式是删掉绑定userPhoto的mat-form-field；如果后续提交表单还需要保留这个控件的值，可以换成隐藏的输入框：

<!-- 隐藏的表单控件，保留userPhoto值但不显示给用户 -->
<input type="hidden" formControlName="userPhoto">

2. 绑定表单值到图片的src属性 #

在Angular中，我们用属性绑定（方括号语法）把表单控件的值传递给img的src。因为页面初始加载时表单值可能为空，记得用安全导航操作符?.避免出现空值报错：

<!-- 绑定userPhoto表单值到图片src -->
<img [src]="newForm.get('userPhoto')?.value" height="200" width="350" alt="用户头像">

修改后的完整HTML片段示例 #

<mat-form-field class="register-full-width"> 
  <mat-label>Phone</mat-label> 
  <input matInput formControlName="phone"> 
</mat-form-field> 

<!-- 可选：保留表单控件但隐藏输入框 -->
<input type="hidden" formControlName="userPhoto">

<!-- 展示用户图片 -->
<img [src]="newForm.get('userPhoto')?.value" height="200" width="350" alt="用户头像">

额外说明 #

• 你的component.ts代码完全不需要修改，因为已经通过patchValue正确把图片地址填充到了userPhoto表单控件中。
• 如果图片地址是assets文件夹下的相对路径（比如assets/photos/user-avatar.jpg），Angular会自动正确解析这个路径；如果是远程图片地址，这个绑定方式同样适用。

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