代碼：
<div className="bigPic">
<img src={require('../../images/bg.png')} alt="" />
</div>
此時的圖片顯示不出來
解決方法一、
再導入的圖片后加.default即可
<img src={require('../../images/bg.png').default} alt="" />
解決方法二、
import imgUrl from '../../images/bg.png';
<img src={imgUrl} alt="" />
原因：
首先 webpack 支持 CommonJS、AMD 和 ES6模塊打包。當我們用 單文件寫組件時，在 script 標簽內使用的是 ES6 的語法且使用 export default 進行默認導出。然而，require 是 CommonJS 的模塊導入方式，不支持模塊的默認導出，因此導入的結果其實是一個含 default 屬性的對象，因此需要使用 .default 來獲取實際的組件。
當然我們也可以使用 ES6 的 import 語句，如果使用 import，需要給定一個變量名，所有 import 語句必須統一放在模塊的開頭。
相反，如果 文件中使用 CommonJS 或 AMD 模塊化語法，使用 module.exports 對象進行導出，那么使用 require 導入時就不需要使用 .default 來獲取。