html - Html：通过单击同一图像来更改图像

Question

伙计们，我想通过单击当前图像来选择图像。

这是我的代码。url包含默认图像。我想更改我当前的可点击图片，当使用点击它时，他可以选择新图片。没有这可能<input type="file">吗？

    onFileChanged(event) {
 
        if (event.target.files && event.target.files[0]){
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]);
            reader.onload = (event) => { // 
                this.url = event.target.result;
            }
        }
    }

<div class="col-md-3">
  <img [src]="url" style="bordered:5px; double-black; border-radius: 8px; max-height: 200px; max-width: 390px; border: 2px solid #ddd;"> 
</div>

标签： htmlcssangulartypescript

Answer 1

你需要一个隐藏的文件输入字段

<input type="file" hidden  (change)="onFileChanged($event)" #file>
<img [src]="url" *ngIf="url" (click)="file.click()" width="200" />

对于工作示例检查stackblitz