Showing Images from server in ngx dropzone

Question

I am using ngx-dropzone in angular to upload the images to the server it is working perfectly fine... but now I wanna fetch the images which are already on server and use their URLs to show them on the web page but ngx preview using the file to render images

.TS file

  //Methods to add and remove image dropzone
  imageFile: File[] = [];


  onSelect(event) {
    console.log(event);
    this.imageFile.push(...event.addedFiles);
    console.log(this.imageFile);
  }

  onRemove(event) {
    console.log(event);
    this.imageFile.splice(this.imageFile.indexOf(event), 1);
  }

ngOnInit() {
this.service.getImage().subscribe(image => {
this.imageFile = image.imageUrl
}

HTML code

<div class="custom-dropzone" ngx-dropzone [accept]="'image/*'"
(change)="onSelect($event)"
[disableClick]="imageFile.length >= 5 ? true : false">
<ngx-dropzone-label>
  <div></div>
</ngx-dropzone-label>
<ngx-dropzone-image-preview 
  ngProjectAs="ngx-dropzone-preview"
  *ngFor="let f of imageFile" [file]="f"
  [removable]="true" (removed)="onRemove(f)" style="background-image: url('https://picsum.photos/200/300');">

  <ngx-dropzone-label>
    (image)
  </ngx-dropzone-label>

</ngx-dropzone-image-preview>

</div>