Vue如何设置图片不转为base64

这篇文章主要介绍了Vue如何设置图片不转为base64，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

Vue设置图片不转为base64

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

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

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

vue-cli 3 、vue-cli 4  版本

修改文件：vue.config.js

源码如下

module.exports = {    // ...        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时，转换成图片预览发送出去。

输入框

<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”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!