Vue实现base64编码图片间的切换功能


Posted in Javascript onDecember 04, 2019

前言

昨天在项目开发中遇到了一个需要展示多张图片到一个容器中的需求,每张图片在鼠标移入时都要更换图片路径,展示一个新的图片,由于每张图片大小都在2~6kb之间,webpack中配置了图片在10kb以内自动转换base64,所有就有了本篇文章的分享。先给大家展示下最后要实现的效果

Vue实现base64编码图片间的切换功能

实现思路

  • 给每个元素添加@mouserover事件和@mouseleave事件
  • 绑定函数,传用于识别当前参数的标识
  • 根据所传参数判断当前状态下应该显示什么图片

解析渲染

实现过程

从json文件中读取图片信息集合,循环渲染json文件中的图片,传当前元素和当前图片的一些信息过去

<div class="row-panel">
  <div class="item-panel" v-for="item in this.emojiList" :key="item.info">
    <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info" @mouseover="emojiConversion($event,'over',item.src,item.hover)" @mouseleave="emojiConversion($event,'leave',item.src,item.hover)">
  </div>
</div>

引入json文件,并在data()中声明

import emoji from '../assets/json/emoji';

data() {
      return {
        emojiList:emoji,
        toolbarList:toolbar
      }
    }

实现鼠标移入移除替换图片的函数

// 表情框鼠标悬浮显示动态表情
  emojiConversion:function (event,status,path,hoverPath) {
    if(status==="over"){
      event.target.src = require(`../assets/img/emoji/${hoverPath}`);
    }else{
      event.target.src = require(`../assets/img/emoji/${path}`);
    }
  }

emoji.json
[
 {
  "name": "pout",
  "src": "1fix@2x.png",
  "info": "撇嘴",
  "hover": "1@2x.gif"
 },
 {
  "name": "porn",
  "src": "2fix@2x.png",
  "info": "色",
  "hover": "2@2x.gif"
 },
 {
  "name": "smile",
  "src": "14fix@2x.png",
  "info": "微笑",
  "hover": "14@2x.gif"
 },
 {
  "name": "smile",
  "src": "178fix@2x.png",
  "info": "滑稽",
  "hover": "178@2x.gif"
 }
]

踩坑过程

错误的使用require

// 这样直接在data中写文件路径没问题,可以正常渲染
emojiSrc:{
    "funny":require("../assets/img/emoji/178fix@2x.png"),
    "funnyNormal":require("../assets/img/emoji/178fix@2x.png"),
    "funnyHover":require("../assets/img/emoji/178@2x.gif"),
    "smile":require("../assets/img/emoji/14fix@2x.png"),
    "smileNormal":require("../assets/img/emoji/14fix@2x.png"),
    "smileHover":require("../assets/img/emoji/14@2x.gif"),
    "pout":require("../assets/img/emoji/1fix@2x.png"),
    "poutNormal":require("../assets/img/emoji/1fix@2x.png"),
    "poutHover":require("../assets/img/emoji/1@2x.gif"),
    "porn":require("../assets/img/emoji/2fix@2x.png"),
    "pornNormal":require("../assets/img/emoji/2fix@2x.png"),
    "pornHover":require("../assets/img/emoji/2@2x.gif"),
  }

渲染结果:

Vue实现base64编码图片间的切换功能

但是如果在json文件中写文件的路径,渲染结果(无法识别文件路径):

Vue实现base64编码图片间的切换功能

解决方案:使用模板字符串,json文件只写文件名,文件路径写在当前组件

require的正确使用方式

require(`../assets/img/emoji/${hoverPath}`);

总结

以上所述是小编给大家介绍的Vue实现base64编码图片间的切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
javascript 日期常用的方法
Nov 11 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
javascript 中的继承实例详解
May 05 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 #Javascript
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 #Javascript
vue项目中极验验证的使用代码示例
Dec 03 #Javascript
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php中return的用法实例分析
2015/02/28 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
javascript实现yield的方法
2013/11/06 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
html5与css3小应用
2013/04/03 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
仲裁协议书
2014/09/26 职场文书