圖沒有加載在陣營組件

Question

我想我的組件來加載圖像：

import React from 'react'; 
import style from './Sidebar.scss'; 

const Sidebar =() => (
    <nav className={style.sidebar}> 
    <ul className={style.wrapper}> 
     <li className={style.item}> 
     <div> 
      <img className={style.logo} src="../../img/myImg.png" alt="contactto logo" /> 
     </div> 
     </li> 
    </ul> 
    </nav> 
); 

export default Sidebar; 

但它不工作，我加載的Roboto字體和工作正常。

這裏是webpack.config我的代碼片段：

{ 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=fonts/[name].[ext]', 
     }, 
     { 
     test: /\.(png|svg|jpg)$i/, 
     use: { 
      loader: 'file-loader?name=img/[name].[ext]', 
     }, 
     }, 

我的IMG不會被複制到我的DIST的文件夾。

Answer 1

您需要首先import的形象：

import Image from '../../img/myImg.png'; 

然後用這個形象，像這樣：

img className = {style.logo} src = {Image} alt = "contactto logo" />