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-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="https://www.atool.online/article/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); } }
效果展示
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。