javascript - 如何使用 Angular 图像上传显示图像缩略图

Question

我正在使用ng2-file-upload上传图像。一切正常，但在我选择图像后，它将显示所选图像的缩略图。

请查看我的stackblitz Link

提前致谢

Answer 1

你可以看看这个demo这可能对你有帮助

模板文件:

img显示图像预览的元素

<img [src]="previewImg" *ngIf="previewImg"/>

类文件:

URL.createObjectURL()是一个静态方法，它创建一个 DOMString，其中包含表示参数中给定对象的 URL。

bypassSecurityTrustUrl绕过安全性并信任给定值是安全样式 URL，即可以在超链接或 <img src> 中使用的值.

constructor(private sanitizer: DomSanitizer) {} // inject the DomSanitizer

 previewImg: SafeUrl;
 this.uploader.onAfterAddingFile = (file) => {
      console.log('***** onAfterAddingFile ******')
      this.previewImg = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(file._file)));;
 }

不要忘记包含 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';