How to make image buttons in JSX?

Question

This doesn't display an image, but still works as a button.

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

My folder setup is /user/img/google.png and /user/loginGoogle.jsx , so I don't think there is a problem with source

Solution

This will work:

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

then if you define:

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

and if you click your image you will see CLICKED appearing in the console.

So if you add the onClick listener to your image it will work. Then you can wrap that image in a button and even add some CSS class to it to match your needs.

Comments

[dovla]

pastebin.com/hnCVFSBs This is what I got now, onSubmit is defined above this, but I still don't get why I don't see the image @Theo

[Theo]

the code seems fine. It definitely works for me. Maybe the image url is wrong? What happens if you try this? soulsnatcher.bplaced.net/LDRYh.jpg

[dovla]

I just figured it out, it was kind of stupid, images must be in a public folder, I moved them there and now it works, thanks tho

[Daniel Wijono]

<button><img src="/img/google.png" alt="my image" onClick={this.myfunction} /></button> in my case this is working no need '.' in front of the '/img'