Html 将单击事件添加到Angular 4中的图像

我需要添加一个点击事件到角度组件中的图像。 我试过：

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

---

我怎样才能做到这一点，你如何在角度上做到这一点？

你可以在这里看到一个工作示例，包括所有可能的方法：

如果您喜欢，请使用

包装器、锚点或图像

---

祝你好运，我也有类似的问题。它可以在Firefox和Internet Explorer中使用，但不能在Chrome中使用。 对于chrome，如果按钮内的所有元素都应响应，请单击添加：

button > * {
    pointer-events: none;
}

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

---

您可以通过这种方式单击im图像

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

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

some.component.html

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

---

您是否尝试过用

div

而不是

按钮来包装图像，以查看其是否有效？然后，将
（单击）=“addItem（）”
添加到
div
。差不多吧。有点猜测。我的意思是，你可以使用
，但我不知道这会如何影响角度。
（单击）
功能对图像有效。很可能是其他原因导致了问题中没有涉及的问题，或者是DOM中的错误，而在添加该按钮时您没有发现这些错误。（点击）img的工作证明：当我像OP一样把它放在一个or里面时，它对我很有效。也许方法写错了？这经常发生在我身上。如果问题解决了，有什么更新吗？嗯。。。也许最好将其作为评论（带有CSS技巧的链接）来写。但作为一个新用户，我知道你还没有足够的分数。嗯，嗯，嗯。。。
<div >
    <img [src]="ImagePath" (click)="ImageClick()"/>
</div>

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

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

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

.image {
   cursor: pointer;
}