Jak zaimportować obraz (.svg, .png) do komponentu React

Question

Próbuję zaimportować plik obrazu do jednego z moich komponentów reagowania. Mam konfiguracji projektu z pakietem internetowym

Oto mój kod dla komponentu

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

Oto mój struktury projektu.

mam ustawienia mojego pliku webpack.config.js w następujący sposób

{ Test: /.(jpg|png|svg)$/, ładowarka: „url-ładowarki ” opcje: { graniczne: 25000, } }, { Test: /.(jpg|png|svg)$/, ładowarka: 'file-loader', opcje: { nazwa: "[ścieżka] [nazwa]. [hash]. [ext]", }, },

PS. Mogę uzyskać obraz z dowolnego innego źródła zdalnego, ale nie z obrazów zapisanych lokalnie. Konsola JavaScript również nie daje mi żadnego błędu. Proszę, cokolwiek pomoże. Jestem całkiem nowy, aby zareagować i nie mogę znaleźć tego, co robię źle.

Answer 1

spróbuj

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