在 ngx dropzone 中顯示現有圖像

Question

我正在使用 Angular ngx-dropzone 在 Mysql 中插入圖像並將它們保存在服務器上。 現在我需要在編輯模式下在 angular 組件中進行預覽/編輯模式，我想在下拉框中顯示現有文件並在上傳拖放區時顯示相同，有什么想法嗎？ 我將圖像作為文件及其在數據庫中的名稱。

Answer 1

您可以使用以下代碼預覽選定的圖像

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
</ngx-dropzone-image-preview>

如果您還想展示 label

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f" [removable]="true" (removed)="onRemove(f)">
        <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
    </ngx-dropzone-image-preview>