Question

我需要向角组件中的图像添加click事件。我尝试过：

<img src="../../assets/add.svg" width="18" height="18" (click)="addItem()">

但这不起作用。如果将图像放在这样的按钮内：

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

它看起来像一个带有图像的按钮，我不想要它，我希望它看起来像：

<img src="../../assets/add.svg" width="18" height="18">

但是它的工作方式类似于：

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

我如何得到这个，你如何做到这一点？

Answer 1

您可以在这里用所有可能的方式查看一个有效的示例：

https://stackblitz.com/edit/angular-kvsjre?file=src%2Fapp%2Fapp.component.html

如果您喜欢使用

包装器或锚点或图像

祝你好运

答案 1 :(得分：1)

some.component.html

<div >
    <img [src]="ImagePath" (click)="ImageClick()"/>
</div>

some.component.ts

export class SomeComponent implements OnInit {
    ...
    ...
    ImagePath = 'path goes here';

    ImageClick() {
        this.ImagePath = 'updated path goes here';
    }
}

答案 2 :(得分：1)

<img class="image" src="../../assets/add.svg" width="18" height="18" (click)="addItem()">

并将以下更改添加到css文件

.image(
   cursor: pointer;
)

答案 3 :(得分：0)

我有一个类似的问题。它可以在Firefox和Internet Explorer中工作，但不能在Chrome中工作。对于chrome，如果按钮内的所有元素均应响应单击，请添加以下内容：

button > * {
    pointer-events: none;
}

否则，根据需要添加以选择元素。

original answer from css-tricks

答案 4 :(得分：0)

您可以通过这种方式点击即时贴图片

在您的视图中创建img并输入

<img [src]="image" alt="" class="image-exercise" (click)="selectFile.click()">
<input type="file" (change)="getImage($event)" style="display: none" #selectFile>

和您的组件创建保存图像的功能

getImage(ev) {
   console.log(ev.target.files[0]);
}

Answer 2