Làm thế nào để nhập hình ảnh (.svg, .png) trong một Thành phần Phản ứng

Question

Tôi đang cố gắng nhập tệp hình ảnh vào một trong các thành phần phản ứng của tôi. Tôi có thiết lập dự án với gói web

Dưới đây là mã của tôi cho các thành phần

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

Dưới đây là cấu trúc dự án của tôi.

tôi đã thiết lập tập tin webpack.config.js của tôi theo cách sau

{ kiểm tra: /.(jpg|png|svg)$/, loader: 'url-loader ', lựa chọn: { hạn: 25000, }, }, { kiểm tra: /.(jpg|png|svg)$/, loader: 'file-loader', lựa chọn: { tên: '[đường dẫn] [tên]. [băm]. [ext]', }, },

PS. Tôi có thể lấy hình ảnh từ bất kỳ nguồn từ xa nào khác nhưng không được lưu hình ảnh cục bộ. Bảng điều khiển JavaScript cũng không cung cấp cho tôi bất kỳ lỗi nào. Xin vui lòng bất cứ điều gì giúp. Tôi khá mới để phản ứng và không thể tìm thấy những gì tôi đang làm sai.

Answer 1

thử sử dụng

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