Reactコンポーネントでイメージ（.svg、.png）をインポートする方法

Question

私の反応コンポーネントの1つにイメージファイルをインポートしようとしています。私は

はここでコンポーネント

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> 
     ) 
    } 
} 

ここに私のプロジェクト構造だために私のコードのWebパックでプロジェクトを設定しています。

私は

{ テスト、次のように設定私のwebpack.config.jsファイルがあります：/.(jpg|png|svg)$/、 ローダー：「URL-ローダー」 オプション：{ 限界：25000、 }、 }、{ 試験：/.(jpg|png|svg)$/、 ローダ： 'ファイルローダ' オプション：{ 名： '[パス] [名前]。[ハッシュ]。[内線]、 }、 }、

PSである。他のリモートソースから画像を取得できますが、ローカルに保存された画像は取得できません。 JavaScriptコンソールでもエラーは表示されません。何か助けてください。私は反応が非常に新しく、何が間違っているのか分かりません。

Answer 1

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> 
 
    ); 
 
    } 
 
}