如何在JSX中制作图像按钮？

Question

这不会显示图像，但仍可以用作按钮。

<button><img src={"./img/google.png"} /></button>

我的文件夹设置是/user/img/google.png和/user/loginGoogle.jsx，所以我认为源没有问题

Answer 1

这将起作用：

<button><img src="./img/google.png" alt="my image" onClick={this.myfunction} /></button>

然后，如果您定义：

  myfunction() {
        console.log("CLICKED");
  }

如果您单击图像，则会在控制台中看到CLICKED。

因此，如果将onClick侦听器添加到图像中，它将起作用。然后，您可以将该图像包装在一个按钮中，甚至可以向其中添加一些CSS类以满足您的需求。