Vue如何设置图片不转为base64(base64,vue,开发技术)

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时，转换成图片预览发送出去。

输入框

<el-inputclass="input-box"ref="elInputText"type="textarea"v-model="content"@paste.native="onPasteEvent"@keydown.native.enter.prevent="handlerKeyupEnter"></el-input>

设定一个 dialog 弹框。

<!--图片预览dialog--><el-dialogtitle="图片预览":visible.sync="previewImgObj.show"v-if="previewImgObj.show"append-to-body><imgwidth="100%"v-if="previewImgObj.imgUrl"class="ly-margin-center":src="previewImgObj.imgUrl"v-image-view/><spanslot="footer"class="dialog-footer"><el-button@click="previewImgObj.show=false">取消</el-button><el-buttontype="primary"@click="sendBase64ImgMessge">确定</el-button></span></el-dialog>

//监听粘贴事件asynconPasteEvent(e){e.preventDefault();letdata=awaitaddEventPasteListener(e);if(data.type==="string"){//复制某条消息if(!data.string)return;//console.log(data.string)//正则表达式判断data是否是base64functionvalidDataUrl(s){returnvalidDataUrl.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)){letthat=this;functionpreviwImg(item){that.previewImgObj={show:true,imgUrl:item};}previwImg(data.string);}}

效果展示