web-dev-qa-db-ja.com

JSXで画像ボタンを作成するにはどうすればよいですか？

これは画像を表示しませんが、ボタンとして機能します。

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

私のフォルダ設定は/user/img/google.pngと/user/loginGoogle.jsxなので、ソースに問題はないと思います

reactjsreact-jsxjsx
6
dovla

これは機能します：

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

次に、次のように定義します。

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

画像をクリックすると、コンソールにCLICKEDが表示されます。

したがって、onClickリスナーを画像に追加すると機能します。次に、その画像をボタンでラップし、ニーズに合わせてCSSクラスを追加することもできます。

9
Theo

すべての画像をプロジェクトのパブリックフォルダに移動しましたが、機能するようになりました

0
dovla