如何以編程方式在 P-fileupload primeng 中顯示圖像？

Question

我正在使用primeng p-fileupload上傳圖片，但我想以編程方式預覽圖片 onUpload 事件，上傳后我得到的圖片路徑為 URL

blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/1c2dadec-e61b-42b7-8c6b-c56d342fb136 ，但圖像未顯示...因此在檢查圖像后顯示

unsafe:blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/6a7a24d7-33fc-4738-b7f8-93b4b6007123

我附上堆棧閃電戰 URL 以供參考：- https://stackblitz.com/edit/primeng-breadcrumb-demo-ntijjo?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

請幫我解決這些問題。

提前致謝。

Answer 1

您可以使用 FileReader API 讀取文件的內容，然后將其設置為 src。

例如：

onUpload(e## Heading ##vent) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
        // Set image src
        this.imageSrc = e.target.result;
    }
    reader.readAsDataURL(event.files[0]);
}

然后在你的模板中：

<img [src]="imageSrc" />