html - 单击按钮时将图像放入内部作为背景按钮

Question

单击输入类型文件时，我想将所选图像显示为按钮的背景。

但是下面的代码在选择图像后不适合(覆盖)按钮内的图像。

HTML

input#file {
  display: inline-block;
  box-shadow: 0 0 5px rgb(0, 0, 0, 0.3);
  width: 100%;
  padding: 400px 0 0 0;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  background-size: 60px 60px;
  cursor: pointer;
  border: none;
}

<input type='file' id="file" (change)="onSelectFile($event)" class="form-control btn btn-primary" [ngStyle]="{'background': 'url(' + imageURL + ') center center no-repeat #e4e4e4'}">

组件

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

    reader.readAsDataURL(event.target.files[0]);

    reader.onload = (event) => {
      this.imageURL = event.target.result;
    }
  }
}

Answer 1

您在 input 中使用的

background 样式将 background-size 覆盖为 center center。您应该使用以下代码设置 background-size: cover。

[ngStyle]="{'background': 'url(' + imageURL + ') center center / cover no-repeat #e4e4e4'}"