總結(jié)下在react中用到圖片的情景
從簡(jiǎn)單到復(fù)雜
- 普通的background-image引用，小圖居多，大圖有限情況
只使用url-loader就ok
{test: /.png$/, loader: "urllimit=8192"}
將小圖全部轉(zhuǎn)換為base64格式內(nèi)聯(lián)到j(luò)s里
- background-image引用，小圖，大圖都有較多
需要url-loader和file-loader搭配使用
小圖轉(zhuǎn)換成base64內(nèi)聯(lián)，大圖使用file-loader發(fā)布成一個(gè)image文件夾，可以放到cdn或者本地
注意 發(fā)布時(shí)路徑問(wèn)題output.publicPath決定
- jsx里 img標(biāo)簽圖片
如果此類圖片較少可以提前直接放到cdn上確保能訪問(wèn)到，在標(biāo)簽內(nèi)直接寫cdn的引用。
如果開發(fā)環(huán)境時(shí)需要在本地有這些圖片，jsx中img圖片的引用方式
<img src={require('./img/ssq.png')} alt=""/>
此處為圖片的真實(shí)相對(duì)路徑
在webapack.config中要對(duì)此配置
{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ù)圖片問(wèn)題 依賴url-loader&file-loader
