图像未在角度Firebase中渲染

Question

我正在从本地计算机上上传图像，并将其存储在firebase上并生成downloadUrl，使用该下载网址我想在同一页面上使用src标签呈现图像，但此处未呈现图像是我上传图像的代码： -

<div class="form-group">
                  <label for="image">Image</label>
                  <input #imageurl="ngModel" [(ngModel)]="imagedetails" name="imageurl" id="imageurl" type="file" (change)="onselected($event)" class="form-control" required>
                  <div class="alert alert-danger" *ngIf="imageurl.touched && imageurl.invalid">
                    Invalid Image Url

                  </div>
              </div>

              <!--Save Button-->
              <button class="btn btn-primary">Save</button>
            </form>
          </div>

    </div>
    <div class="col-md-6">
        <div class="card" style="width: 18rem;">
          {{downloadUrl}}
            <img class="card-img-top" [src]="downloadUrl" >
            <div class="card-body">
              <h5 class="card-title">{{title.value}}</h5>
              <p class="card-text">{{price.value}}</p>
            </div>
        </div>
    </div>

  </div>

在我的component.ts中，我想生成downloadUrl并将该downloadUrl设置为下面的src标签是我的component.ts：-

  onselected(event)
  {
       console.log("The Select File is",event.target.files[0]);
       let name=event.target.files[0];
       console.log("THe Name is",name.name);
       const metadata={'contentType':name.type};
       let url1="url3";
       const storageRef:firebase.storage.Reference=firebase.storage().ref('/images/feature/'+url1);
       storageRef.put(name,metadata);
       storageRef.getDownloadURL().then(downloadURL => {
        const imageUrl = downloadURL;
        this.downloadUrl=imageUrl;
        console.log('URL:' + imageUrl);
      })

  }
  save(product)
  {
     console.log("The Catagory",this.catagoryData);
     console.log("The ImageData is",this.imagedetails);
     product.imageUrl=this.downloadUrl;
     product.url=this.downloadUrl;
     console.log("The Prodcut  is",product);
     this.catagory.createProduct(product);

  }

请帮助解决问题，将其上传到表单后如何立即显示