загрузка фотографии из базы данных в angular форму материала

Question

Я новичок с angular материалом, и я хочу отобразить фотографию, полученную из базы данных, в форме. Я могу получить адрес фотографии, который уже загружен в папку моего ресурса, и если я использую это значение с matInput , у него есть адрес фотографии, но я не знаю, как использовать это значение с тегом изображения.

это мой файл componentnent.ts

  constructor(private userService: UserService, private formBuilder: FormBuilder) { 
    this.newForm = this.formBuilder.group({
      name: [''],
      email: [''],
      phone: [''],
      userPhoto:['']
    })
    this.newForm.controls['email'].disable();
  }

  ngOnInit() {
    this.userService.receiveUserProfile().subscribe(result => {
      this.newForm.patchValue({
          name: result.name,
          email: result.email,
          phone: result.phone,
          userPhoto: result.userPhoto,
        }); 
    })
  }

и это часть моего компонента. html file

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

<mat-form-field class="register-full-width">
    <input #photo matInput formControlName="userPhoto">
</mat-form-field>

<img src="" height="200" width="350">

все остальные три поля отображаются корректно как значение во входных тегах, а также фото. но я хочу вместо formControlName = "userPhoto" использовать это значение в img sr c для отображения изображения.

Answer 1

Вы можете просто получить значение formControl и связать его с src-attribute из img-tag, например:

<img [src]="newForm.get('userPhoto').value"  height="200" width="350">

Обратите внимание на квадратные скобки вокруг [src] для односторонней привязки src-attribute к значению свойства. Подробнее об этом можно прочитать здесь.