webpack打包html中图片的问题

[ckinmind]

发现webpack没法直接处理html中引入到图片问题，比如下面这样

 <div className="apple"><img src="../images/apple.png" alt=""/></div>

上面这个图片对应的路径是开发环境下的地址，但是打包后的资源文件是assets, webpack并不会这样引入的图片，要解决这个问题有几种方式

1. 更改引入方式，使用css background的方式引入
2. 修改这里的src地址，改成相对于打包后的地址，然后将图片拷贝到assets目录，比如src="assets/apple.png"
3. 使用require的方式加载图片，在gallery-by-react中使用过这样干方式
4. 百度webpack 图片路径

[ckinmind]

第三方式这样写

  <div className="apple"><img src={require('../images/apple.png')} alt=""/></div>

webpack打包的时候回去找这个图片，并且回应用url-loader的规则，小于8kb转base64