create-react-app中img圖片不現實

場景：正常的情況下是這么引用圖片，我的圖片路徑是 src/images/login-from-icon1.png

 <img src="../images/login-from-icon1.png" alt=""/>

結果：不能現實圖片

 

解決：

方案一：

可以把圖片放到public文件中，這里的圖片路徑是 public/img/login-from-icon1.png

這里有說明

https://facebook.github.io/create-react-app/docs/using-the-public-folder

　　一種寫法：

<img className="icon1" src={process.env.PUBLIC_URL + '/img/' + 'login-from-icon1' + '.png'} alt=""/>

　　另一種寫法：

<img className="icon1" src="img/login-from-icon1.png" alt=""/>

 

方案二：

圖片路徑依然是 src/images/login-from-icon1.png

需要注意的只能通過絕對路徑來引入圖片

　　一種寫法，圖片引入：

import icon1 from '../images/login-from-icon1.png';

<img src={ icon1 } alt=""/>

　　

　　另一種寫法，利用webpack：

<img src={require("../images/login-from-icon1.png")} />

　　注意：require中只能放字符串，不能放變量

 

總結，這里我用的是方案二，因為放在public下的圖片是不被webpack處理的。