如何更改角度的个人资料图片？

Question

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

HTML：

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

Ts：

  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 input file ，该html input file将所选文件显示为文本，但是我需要在个人资料图片上单击时显示它，该文件夹需要从本地显示（通常会在单击所选文件按钮上显示） ..

为了使我感到困惑，我有一个链接，我需要的是https://codepen.io/anon/pen/PXjaJv

在这里，您可以将鼠标悬停在图像上，文字显示为Drag your photo here or browse your computer ..（相同的文字出现在给定的链接默认值中，因为那里没有图片，但是我只需要悬停是因为我我已经有头像图像，因此将鼠标悬停在任何图像上，我需要显示此更改个人资料图片的文本。）

忽略此链接中图像的裁剪和拖放https://codepen.io/anon/pen/PXjaJv，但是我唯一需要做的就是UI更改，例如悬停时会生成覆盖文本，然后单击该文本可从计算机浏览图片更改，然后使用删除选项更改个人资料图片，这将返回到头像图像本身（如果已删除）。

请帮助我使用没有jquery的纯角度/打字稿方式来达到结果。

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的示例。

Answer 2

尽管以上答案是正确的，但我想补充一下，

.css

p {
  font-family: Lato;
}

.image-container {
  position: relative;
  display: inline-block;
  text-align: center;
}

img {
  height: 200px;
  width: 200px;
  border: 5px solid #000;
  border-radius: 50%;
}

.select-profile-picture {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.message {
  position: absolute;
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  transition: all 1s;
  opacity: 0;
}

.image-container:hover .message {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.html

<div class="image-container">
 <img [src]="url ? url : 'https://www.w3schools.com/howto/img_avatar.png'" class=""> <br/>
 <input type='file' (change)="onSelectFile($event)" class="select-profile-picture">
 <span class="message">Tap here to select your picture</span>
</div>