欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-09 22:34:31
目录vue设置图片不转为base64vue-cli 3 、vue-cli 4 版本vue-cli 2版本vue项目base64转img输入框效果展示vue设置图片不转为base64在使用 vue.js...

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的方式

vue项目base64转img

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

输入框

<el-input
        class="input-box"
        ref="elinputtext"
        type="textarea"
        v-model="content"
        @paste.native="onpasteevent"
        @keydown.native.enter.prevent="handlerkeyupenter"
      ></el-input>

设定一个 dialog 弹框。

<!-- 图片预览dialog -->
    <el-dialog
      title="图片预览"
      :visible.sync="previewimgobj.show"
      v-if="previewimgobj.show"
      append-to-body
    >
      <img
        width="100%"
        v-if="previewimgobj.imgurl"
        class="ly-margin-center"
        :src="previewimgobj.imgurl"
        v-image-view
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewimgobj.show = false">取 消</el- button>
        <el-button type="primary" @click="sendbase64imgmessge">确 定</el-button>
      </span>
    </el-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);
        }
     }

效果展示

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

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

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

相关标签: Vue 图片 base64