Yansıma Bileşeninde görüntü (.svg, .png) nasıl içe aktarılır

Question

Bir yansıma bileşenimden birinde görüntü dosyası almaya çalışıyorum. Ben

İşte bileşeni

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

İşte benim proje yapısı var benim kod web paketi ile proje kurulum var.

aşağıdaki şekilde

{ testi içinde setup benim webpack.config.js dosyası var: /.(jpg|png|svg)$/, yükleyici: 'url-yükleyici ' seçenekleri: { sınırı: 25000, } } { testi: /.(jpg|png|svg)$/, yükleyici: 'dosya yükleyici', seçenekleri: { adı: '[yol] [isim]. [karma]. [ext]', }, },

PS. Başka bir uzak kaynaktan görüntü alabilirim, ancak yerel olarak kaydedilmiş görüntüleri değil. JavaScript Konsolu da bana herhangi bir hata vermiyor. Lütfen herhangi bir şey yardımcı olur. Neyi yanlış yaptığımı bulmak ve tepki verememek için oldukça yeni.

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