總結下在react中用到圖片的情景
從簡單到復雜
- 普通的background-image引用拐迁，小圖居多送丰，大圖有限情況
只使用url-loader就ok
{test: /.png$/, loader: "urllimit=8192"}
將小圖全部轉換為base64格式內(nèi)聯(lián)到js里
- background-image引用缔俄，小圖，大圖都有較多
需要url-loader和file-loader搭配使用
小圖轉換成base64內(nèi)聯(lián)，大圖使用file-loader發(fā)布成一個image文件夾俐载，可以放到cdn或者本地
注意 發(fā)布時路徑問題output.publicPath決定
- jsx里 img標簽圖片
如果此類圖片較少可以提前直接放到cdn上確保能訪問到铐懊，在標簽內(nèi)直接寫cdn的引用。
如果開發(fā)環(huán)境時需要在本地有這些圖片瞎疼，jsx中img圖片的引用方式
<img src={require('./img/ssq.png')} alt=""/>
此處為圖片的真實相對路徑
在webapack.config中要對此配置
{test:/\.png$/,loader:"urllimit=8192&name=img/[name].[ext]"}
此處是本地server的圖片引用
<img src="/img/ssq.png" alt="" data-reactid=".0.0.1.0">
此處是編譯后的代碼
n.p+"img/ssq.png"
/注/
{test:/\.png$/,loader:"urllimit=8192&name=img/[name].[ext]"}
可以處理絕大多數(shù)圖片問題 依賴url-loader&file-loader
