vue项目 webpack 打包图片小图片转换成base64,大图片自动转换成网络路径

问题现象:用vue框架开发的一个demo项目,在本地测试运行发现图片资源变成了base64格式,然后换了一张图片(这张图片比较大)img里的src变成了图片路径,然后打包给测试之后发现线上的也是找不到这张图片,于是开始自己寻找问题的原因。

找了资料后发现,原来webpack打包机制的原因导致的。

  // 小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。
  // 大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题.而name也是file-loader的属性. 重复一次 必须安装file-loader

  { 

    test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, 

    loader: 'url-loader',

    query: {

      // 图片大小限制 单位b

      limit: 8192,

      // 生成的文件的存放目录

      name: 'resourse/[name].[ext]'

    }

  },

你可能感兴趣的:(vue项目 webpack 打包图片小图片转换成base64,大图片自动转换成网络路径)