file-loader
file-loader 返回的是图片的url
url-loader
url-loader可以通过limit属性对图片分情况处理,当图片小于limit(单位:byte)大小时转base64,大于limit时调用file-loader对图片进行处理。
相同点:都是在webpack中处理图片、字体图标等文件。
关系:url-loader封装了file-loader,但url-loader并不依赖于file-loader。
js中图片转base64
项目中有一列表,图片是通过v-for循环出来的,如果把url放在js中,就不能被转成base64了,url-loader只会编译html和css中的图片。可以通过import导入图片,通过一个变量去接收,然后将变量放在v-for中渲染。
import beijing from './static/images/4.png';
import shanghai from './static/images/5.png';
import shenzhen from './static/images/6.png';
[
{
name: '北京',
src: beijing
},
{
name: '上海',
src: shanghai
},
{
name: '深圳',
src: shenzhen
}
]