url-loader 和 file-loader的区别

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
    }
]