javascript - 如何改变 Angular 个人资料图片？

Question

我正在制作 Angular 6 应用程序，我正在使用图像上传选项，

HTML:

<img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> <br/>
<input type='file' (change)="onSelectFile($event)">

时间:

  onSelectFile(event) {
    if (event.target.files && event.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(event.target.files[0]); // read file as data url

      reader.onload = (event) => { // called once readAsDataURL is completed
        this.url = event.target.result;
      }
    }
  }

工作 stackblitz: https://stackblitz.com/edit/angular-file-upload-preview-ekyhgh

这里我所做的事情是给 html 输入文件，它将选择的文件显示为文本，但我需要在单击配置文件图像时将其显示，文件夹需要从本地显示(将出现在正常情况下单击选择文件按钮时)..

为了混淆很多，我有一个我需要的链接是 https://codepen.io/anon/pen/PXjaJv

在这里，您可以看到将鼠标悬停在图像上时，文本显示为将您的照片拖到此处或浏览您的计算机..(相同的文本出现在给定的链接默认值中，因为那里没有图片但是我需要悬停只是因为我已经有了头像图像，所以将鼠标悬停在我需要显示更改个人资料图片的文本的任何图像上)。

忽略在此链接中裁剪和删除图像 https://codepen.io/anon/pen/PXjaJv但我唯一需要的是 UI 更改，例如悬停时制作覆盖文本并单击文本从计算机浏览图片进行更改，然后使用删除选项更改个人资料图片，这将返回到头像图像本身(如果删除) ..

请帮助我在没有 jquery 的情况下使用纯 angular/typescript 方式获得结果。

Answer 1

您应该使用具有适当 for 属性的 label 标签。 for 属性必须包含 input 标签的 id。

看例子。

<label class="hoverable" for="fileInput">
  <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'"> 
  <div class="hover-text">Choose file</div>
  <div class="background"></div>
</label>
<br/>
<input id="fileInput" type='file' (change)="onSelectFile($event)">
<button *ngIf="url" (click)="delete()" >delete</button>

关于 stackblitz 的示例.