[解決済み] React Componentで画像（.svg, .png ）を取り込む方法

質問

リアクトコンポーネントの1つに画像ファイルをインポートしようとしています。プロジェクトはwebパックでセットアップされています。

以下は、このコンポーネントのコードです。

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

これが私のプロジェクト構成です。

webpack.config.jsを以下のように設定しました。

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS. 他のリモートソースから画像を取得することはできますが、ローカルに保存された画像を取得することはできません。JavaScriptコンソールもエラーになりません。何か参考になることがあればお願いします。私は反応に非常に新しいですし、私は間違ってやっているものを見つけることができません。

どうすればいいですか？

を使ってみてください。

import mainLogo from'./logoWhite.png';

//then in the render function of Jsx insert the mainLogo variable

class NavBar extends Component {
  render() {
    return (
      <nav className="nav" style={nbStyle}>
        <div className="container">
          //right below here
          <img  src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
        </div>
      </nav>
    );
  }
}