Отображение изображений с сервера в ngx dropzone - PullRequest
Новая
       72

Отображение изображений с сервера в ngx dropzone

0 голосов
/ 06 мая 2020

Я использую ngx-dropzone в angular для загрузки изображений на сервер, он работает отлично ... но теперь я хочу получить изображения, которые уже находятся на сервере, и использовать их URL-адреса, чтобы показать их в Интернете страница, но предварительный просмотр ngx с использованием файла для рендеринга изображений

.TS файл 

  //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 код 

<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>
...