使用打字稿不显示预览图像

Question

我在 Angular

中使用此 link 将图像转换为字节数组

但 src 未绑定到图像进行预览我的打字稿代码是：

  upload() : void {
    const file = (document.querySelector('input[type=file]') as HTMLInputElement).files![0];
    const preview = document.getElementById('preview') as HTMLImageElement;
    const reader = new FileReader();
    let byteArray;
    reader.addEventListener("loadend", function () {
      // convert image file to base64 string
      console.log('base64', reader.result);
      **preview.src != reader.result;**
      byteArray = convertDataURIToBinary(reader.result);

      console.log('byte array', byteArray);
    }, false);
    if (file) {
      reader!.readAsDataURL(file);

    }

  }

}
function  convertDataURIToBinary(dataURI:any) {
  var base64Index = dataURI.indexOf(';base64,') + ';base64,'.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(let i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

我的html是

<input type="file" id="file" accept="image/*" width="300" height="300" />

<button (click)="upload()">Upload</button>

<img   id="preview">

我的问题是这一行 src 是空的，图像没有显示

谢谢

Answer 1

您不应该“定位”打字稿中的元素，而是使用数据绑定方法，这是 Angular 中的一种 go-to 方式。

在你的HTML中：

<img src="{{previewImage}}" *ngIf="previewImage">

在您的打字稿中更新以下片段：

reader.addEventListener("loadend", function () {
      // convert image file to base64 string
      console.log('base64', reader.result);
      **preview.src != reader.result;**
      ...

进入这个：

reader.addEventListener("loadend", () => {
      // convert image file to base64 string
      console.log('base64', reader.result);
      this.previewImage = reader.result;
      ...

Answer 2

请将 reader 结果保存到一个变量中，并在 HTML

中使用与来源相同的 img 标签

TS 文件：

binaryImage : any;

...
this.binaryImage = reader.result;
...

HTML 文件：

<img src="{{binaryImage}}">

或

<div style="background-image: url({{binaryImage}});">

使用打字稿不显示预览图像

preview image not be shown using typescript

angular

typescript