【React】public以下に画像を保存して、表示させる

Reactで画像を表示させる時どうすればいいんだろう？
と、検索したらジャストナウの答えがすぐ見つかりました。感謝の日々です...

参考サイト

表示方法

publicのパスは

{`${process.env.PUBLIC_URL}/ ファイル名 `}

これで辿れるみたいです

試しに create-react-app で元々保存されているアイコンを表示してみます

 render(props) {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Hello {this.state.text}</h1>
         <span onClick={()=>{this.handleClick("World")}}>world</span>
         <span onClick={()=>{this.handleClick("React")}}>react</span>

        {/* この部分 */}
       <Image image={`${process.env.PUBLIC_URL}/logo192.png`}/>
       </header>
     </div>
   );
 }