Angular 如何以与NodeJ成角度的反应形式显示图像

我有一个反应式表单，它从nodejs在输入中加载一个对象。我可以显示每个对象的输入文本，但不能在表单中显示图像

  <form autocomplete="off" [formGroup]="forma" (ngSubmit)="onSubmit()">


        <div class="form-group row">
            <!-- <img class="img-list" src="{{ url + 'avatar/' + book.image }}" alt=""> -->

        </div>

        <div class="form-group row">

            <div class="col">

                <input class="form-control" type="hidden" formControlName="_id">

            </div>

        </div>
        <div class="form-group row">
            <!-- *ngIf="book.image && book.image !== ''" -->

            <div class="form-control">
                <!-- formControlName="image"> -->
                <input class="form-control" type="" formControlName="image">
                <img class="img-list" src="{{ url + 'avatar/' + image }}" alt="">
                <!-- <input class="form-control" type="" formControlName="image"> -->

            </div>


        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">title</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="title" [class.is-invalid]="titleNoValido">
                <small *ngIf="titleNoValido" class="text-danger">
          write the name
        </small>
            </div>

        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">description</label>
            <div class="col">

                <textarea class="form-control" rows="8" cols="80" formControlName="description" [class.is-invalid]="descripcionNoValido">
               </textarea>

                <small *ngIf="descripcionNoValido" class="text-danger">
          write the name
        </small>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">author</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="author" [class.is-invalid]="authorNoValido">
                <small *ngIf="authorNoValido" class="text-danger">
          write the name
        </small>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">price</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="price" [class.is-invalid]="priceNoValido">
                <small *ngIf="priceNoValido" class="text-danger">
                Write the phone number
        </small>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">stock</label>
            <div class="col">

                <input class="form-control" type="text" formControlName="stock" [class.is-invalid]="stockNoValido">
                <small *ngIf="priceNoValido" class="text-danger">
                Write the phone number
        </small>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">Imagen</label>
            <angular-file-uploader [config]="afuConfig" (ApiResponse)="upload($event)">
            </angular-file-uploader>
            <!-- <input class="form-control" type="file" (change)="onChange($event)"> -->

            <a class="btn btn-outline-primary" (click)="save()">save image</a>

        </div>

        <div class="form-group row">
            <label class="col-2 col-form-label">&nbsp;</label>
            <div class="input-group col">
                <button type="submit" class="btn btn-outline-primary btn-block">
        Send
      </button>
            </div>

        </div>
    </form>

我只在输入中显示一个text=带有.jpg的图像名称

---

src=“{url+'avatar/'+image}}”在src中，我无法获取图像。

我已修复了在构造函数（）中添加component.ts的错误。

this.url=global.url

（这将在后端获取url）

我在component.html中也做了

  <div class="">
        <img class="img-list" src="{{ url + 'avatar/' + imgURL }}" alt="">
    </div>



getBook()
{
  this.route.params.subscribe(params =>{
    let id = params['id'];
    this.bookservice.getBook(id).subscribe(
      response =>
      {
        if(!response.book)
        {
          this.router.navigate(['/listbooks']);
        }
        else
        {
          this.book = response.book;
          this.forma.controls['_id'].setValue(response.book._id); 
          this.forma.controls['title'].setValue(response.book.title);
          this.forma.controls['description'].setValue(response.book.description);
          this.forma.controls['author'].setValue(response.book.author);
          this.forma.controls['stock'].setValue(response.book.stock);
          this.forma.controls['price'].setValue(response.book.price);
          this.forma.controls['image'].setValue(response.book.image);
          this.imgURL = response.book.image; // I get here the name of image
          console.log(this.imgURL);
          console.log(this.book);
        }
      }
    )
  });
}

getBook（）
{
this.route.params.subscribe（params=>{
设id=params['id']；
这个.bookservice.getBook（id）.订阅(
响应=>
{
if（！response.book）
{
this.router.navigate（['/listbooks']）；
}
其他的
{
this.book=response.book；
此.forma.controls[''u id'].setValue（response.book.\u id）；
此.forma.controls['title'].setValue（response.book.title）；
此.forma.controls['description'].setValue（response.book.description）；
此.forma.controls['author'].setValue（response.book.author）；
此.forma.controls['stock'].setValue（response.book.stock）；
此.forma.controls['price'].setValue（response.book.price）；
此.forma.controls['image'].setValue（response.book.image）；
this.imgURL=response.book.image；//我在这里得到图像的名称
log（this.imgURL）；
console.log（this.book）；
}
}
)
});
}

你能分享api的图像响应吗？参数{u id:'5f4547a23ef14d1ad547e5c4'，日期：'2020-08-25T17:17:22.461Z'，标题：'JKJLKJ'，描述：'kljlkj'，作者：'kljlkj'，价格：555，图像：'u pvSWlLP26XggTxS0KCtn3qu.png'，股票：5555，{u v:0}这是请求还是响应？src=“{url+'avatar/'book.image}“这是在其他组件中工作的请求，而不是在这里。为什么它是

'avatar/'+image

而不是

'avatar/'+book.image

像在另一个示例中一样？

  <div class="">
        <img class="img-list" src="{{ url + 'avatar/' + imgURL }}" alt="">
    </div>



getBook()
{
  this.route.params.subscribe(params =>{
    let id = params['id'];
    this.bookservice.getBook(id).subscribe(
      response =>
      {
        if(!response.book)
        {
          this.router.navigate(['/listbooks']);
        }
        else
        {
          this.book = response.book;
          this.forma.controls['_id'].setValue(response.book._id); 
          this.forma.controls['title'].setValue(response.book.title);
          this.forma.controls['description'].setValue(response.book.description);
          this.forma.controls['author'].setValue(response.book.author);
          this.forma.controls['stock'].setValue(response.book.stock);
          this.forma.controls['price'].setValue(response.book.price);
          this.forma.controls['image'].setValue(response.book.image);
          this.imgURL = response.book.image; // I get here the name of image
          console.log(this.imgURL);
          console.log(this.book);
        }
      }
    )
  });
}