总结下在react中用到图片的情景
从简单到复杂
- 普通的background-image引用，小图居多，大图有限情况
只使用url-loader就ok
{test: /.png$/, loader: "urllimit=8192"}
将小图全部转换为base64格式内联到js里
- background-image引用，小图，大图都有较多
需要url-loader和file-loader搭配使用
小图转换成base64内联，大图使用file-loader发布成一个image文件夹，可以放到cdn或者本地
注意 发布时路径问题output.publicPath决定
- jsx里 img标签图片
如果此类图片较少可以提前直接放到cdn上确保能访问到，在标签内直接写cdn的引用。
如果开发环境时需要在本地有这些图片，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]"}
可以处理绝大多数图片问题 依赖url-loader&file-loader
