Question

我正在使用我使用的图像上传选项制作Angle 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;
      }
    }
  }

有效的堆叠闪电战： https://stackblitz.com/edit/angular-file-upload-preview-ekyhgh

这里给我做的事情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

您应将label标记与正确的for属性一起使用。 for属性必须包含id标记中的input。

看例子。

<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

    let shareLink:String = "http://YourURL"

    guard let newSharelink = URL(string: shareLink) else { return }
    let components = DynamicLinkComponents.init(link: newSharelink, domain: "Your Domin From Genrated By Google Account(EX. = napu4u.app.goo.gl)")
    let iOSParams = DynamicLinkIOSParameters(bundleID: "YourBundle ID")
    iOSParams.appStoreID = "Your AppStore ID (Optional)"

    components.iOSParameters = iOSParams
    let options = DynamicLinkComponentsOptions()
    options.pathLength = .short
    components.options = options

    components.shorten { (shortURL, warnings, error) in

        if let error = error {
            print(error.localizedDescription)
            return
        }

        let shortLink = shortURL
        print(shortLink)
    }

.html

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;
}

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

2 个答案: