Vue 设置图片不转为base64的方式

目录

• Vue设置图片不转为base64
• vue-cli 3 、vue-cli 4  版本
• vue-cli 2 版本
• Vue项目base64转img
• 输入框
• 效果展示

Vue设置图片不转为base64

在使用 Vue.js 框架开发项目时，vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64。

好处：带来了更快的渲染，不会因为页面切换时还有加载图片的延迟感。

坏处：打包后的CSS，JS文件非常大，特别是图片数量多的情况下，这个问题尤为明显。

vue-cli 3 、vue-cli 4  版本

修改文件：vue.config.js

源码如下

module.exports = {
    // ...
    /* 调整内联文件的大小限制，让小图片不转为base64 */
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 1 }))
    },
    // ...
}

vue-cli 2 版本

修改文件：/build/webpack.base.conf.js

修改方式，如下图所示位置，将图片和字体的 limit（限制）修改为：1（0貌似无效），修改后文件都不会再被转为base64格式了。

Vue项目base64转img

最近一个vue项目中，有个需求是， 发送消息是base64时，转换成图片预览发送出去。

输入框

设定一个 dialog 弹框。

    
      
      
        取 消
        确 定
      
    

// 监听粘贴事件
    async onPasteEvent(e) {
      e.preventDefault();
      let data = await addEventPasteListener(e);
       if (data.type === "string") {
        // 复制某条消息
        if (!data.string) return;
        // console.log(data.string)
        // 正则表达式判断data是否是base64
        function validDataUrl(s) {
          return validDataUrl.regex.test(s);
        }
        validDataUrl.regex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s]*?)\s*$/i;
        // 如果是base64转换成图片预览
        if (validDataUrl(data.string)) {
          let that = this;
          function previwImg(item) {
            that.previewImgObj = {
              show: true,
              imgUrl: item
            };
          }
          previwImg(data.string);
        }
     }

效果展示

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。