返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue 设置图片不转为base64的方式
  • 625
分享到

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

2024-04-02 19:04:59 625人浏览 独家记忆
摘要

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

Vue设置图片不转为base64

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

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

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

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);
        }
     }

效果展示

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

--结束END--

本文标题: Vue 设置图片不转为base64的方式

本文链接: https://lsjlt.com/news/138541.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue 设置图片不转为base64的方式
    目录Vue设置图片不转为base64vue-cli 3 、vue-cli 4  版本vue-cli 2 版本Vue项目base64转img输入框效果展示Vue设置...
    99+
    2024-04-02
  • Vue如何设置图片不转为base64
    这篇文章主要介绍了Vue如何设置图片不转为base64,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Vue设置图片不转为base64在使用 Vue.js 框架开发项目时,vu...
    99+
    2023-06-29
  • vue图片转base64格式的方法示例
    目录1.require的方式2.canvas.toDataURL()3.FileReader.readAsDataURL()总结1.require的方式 用vue引入图片的requi...
    99+
    2022-12-21
    vue图片转base64 vue转base64格式
  • vue图片转base64本地路径跨域方式
    目录图片转base64本地路径跨域问题描述解决方案图片转成base64跨域等安全限制及解决图片转base64本地路径跨域 问题描述 代码 getUrlBase64(url, ext...
    99+
    2024-04-02
  • webpack图片转为base64的实现示例
    下载url-loader yarn add -D url-loader module: { rules: [ { test: /\.(jpeg...
    99+
    2024-04-02
  • Vue + element-ui 背景图片设置方式
    目录element-ui 背景图片设置element自定义背景更换element-ui 背景图片设置 初学vue 看到其他网址都有些背景图片,于是试着自己也写了一下,表述不好请见谅 ...
    99+
    2022-11-13
    Vue element-ui 背景图片设置 element-ui设置背景图片
  • JS中将图片base64转file文件的两种方式
    目录1.通过new File()将base64转换成file文件,此方式需考虑浏览器兼容问题2.先将base64转换成blob,再将blob转换成file文件,此方法不存在浏览器不兼...
    99+
    2023-02-17
    js 图片base64转file文件 js base64转file
  • jedis获取redis中二进制图片转Base64方式
    jedis获取redis图片 转成Base64 jedis存对象 public static byte[] serialize(Object object) { O...
    99+
    2024-04-02
  • 怎么让chatgpt将html中的图片转为base64
    这篇文章主要介绍“怎么让chatgpt将html中的图片转为base64”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么让chatgpt将html中的图片转为base64”文章能帮助大家解决问题。...
    99+
    2023-07-05
  • Android中的图片如何转换成Base64格式
    前言: Android手机客户端的图片数据上传到服务器中保存,首先需要将客户端的图片转换成Base64格式,然后才能通过网络上传到服务器中。 有两种方法可以实现: 让客户端将图片上传到服务器,将图片的网络URL告诉服务器 将图片转成...
    99+
    2023-09-02
    服务器 运维 android java Powered by 金山文档
  • 微信小程序图片转base64的方法
    微信小程序图片转base64的方法 :1、新建小程序,将图片拷贝到目录。2,直接用readFileSync进行编码转化。3,运行以后图片就转成base64。具体操作步骤:首先新建小程序并把图片拷贝到目录,如下图所示:然后用readFileS...
    99+
    2024-04-02
  • 怎么设置win10图片打开方式为照片查看器
    小编给大家分享一下怎么设置win10图片打开方式为照片查看器,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!打开默认查看“照片”选项,可以看到“选择运用”上并没有照...
    99+
    2023-06-27
  • html图片不滚动的设置方法
    这篇文章主要介绍了html图片不滚动的设置方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html设置图片不滚动的方法:首先新建一个html示例文件;然后在index.ht...
    99+
    2023-06-14
  • JAVA11中图片与BASE64相互转换的实现方法
    这篇文章主要介绍了JAVA11中图片与BASE64相互转换的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常用的java框架有哪些1.SpringMVC,Spring...
    99+
    2023-06-14
  • Java中将base64编码字符串转换为图片的代码
    前一段时间,在做摄像头拍照上传,摄像头拍的照片为base64编码格式的字符串,需要上传至项目中,则需要使用到将base64编码字符串转换为图片 1、将base64编码字符串转换为图片...
    99+
    2023-03-19
    Java base64编码字符串转换为图片 Java base64转换图片 Java base64编码转换
  • jsp将图片设置为背景的方法
    小编给大家分享一下jsp将图片设置为背景的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 首先把图片放在img文件夹下的 ...
    99+
    2024-04-02
  • css如何设置图片平铺方式
    本篇内容介绍了“css如何设置图片平铺方式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • css设置背景图片不平铺的方法
    本篇内容主要讲解“css设置背景图片不平铺的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css设置背景图片不平铺的方法”吧!方法:1、使用background-attachment属性,语...
    99+
    2023-06-14
  • css设置图片的方法
    这篇文章给大家分享的是有关css设置图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css设置图片的方法:首先创建一个HTML示例文件;然后在body中创建一个div;最后通过“background-im...
    99+
    2023-06-14
  • Java实现将PDF转为图片格式的方法详解
    目录代码编译环境将整个 PDF 文档转换为多个图片完整代码效果图将指定 PDF 页面转换为图片完整代码效果图PDF文件和图片文件,这是两种完全不一样的格式,可是有的时候这两种格式却是...
    99+
    2023-03-23
    Java实现PDF转图片 Java PDF转图片 Java PDF 图片
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作