1.踩的一个坑是：直接获取对象，使用style改变其背景图地址或者对img标签改变src值

　　因为经过vue经过打包编译后，图片地址已经被处理了，这时更新地址是无效的，会找不到图片。

　　所以可以用多个标签把要用到的图片提前加进去，使用时直接切换标签就可以了，用v-if，v-else，或者层叠

vue动态切换图片的更多相关文章

  1. 第八十七篇：Vue动态切换组件的展示和隐藏

    好家伙, 1.什么是动态组件? 动态组件指的是动态切换组件的限制与隐藏 2.如何实现动态组件渲染 vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染. 可以将其看 ...

  2. Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  3. Jquery的动态切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. vue动态切换视图

    big.vue <template> <div> big <p>{{view}}</p> <!--标准规范--> <component ...

  5. VUE 动态切换列表active样式

    参考VUE官方文档样式绑定 https://cn.vuejs.org/v2/guide/class-and-style.html 需求是动态加载出来了所有菜单列表,点击其中一个li元素改变这个元素的背 ...

  6. vue动态定义图片路径

     当我在html模块或者css中引入图片的时候用相对路径,例: <div> <img src="../../assets/img/policeImg/tt.png" ...

  7. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

  8. 新闻动态切换图片html(flash)

    效果图: 代码: <table id="table_zi"> <tr> <td class="width330"> < ...

  9. vue动态切换组件

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  10. vue动态切换页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 你好 ChatGPT, 帮我看下这段代码有什么问题？

    点赞再看,动力无限. 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码博客 已经收录,有很多系列文章. 今天一个很简单的功能,触发了一个 BUG,处 ...

  2. Excel操作技巧

    命令 获取行号ROW(D2).COLOUM(D2) 快捷键 alt+=求和:alt+f1生成柱形图:alt+回车强制换行:alt+178输入平方:alt+179输入立方: shitf+大十字光标 换位 ...

  3. 轻量级CI/CD发布部署环境搭建及使用_02_docker安装jenkins

    轻量级CI/CD发布部署环境搭建及使用_02_docker安装jenkins 授人以鱼不如授人以渔,如果说的别人都没明白,说明自己实际也不是太明白   1,搜索jenkins docker searc ...

  4. Postgresql之闪回数据库示例

    一.摘要 在Oracle中,若发生重大的误操作,那么我们可以使用flashback database命令来把数据库整体闪回到过去的误操作的时间点,当然前提是需要打开数据库的闪回功能. 在PG中,能否也 ...

  5. 关于vue组件传值和事件绑定问题

    <template> <view style="width: 100%; height: 100%;"> <view class="tabs ...

  6. 多个mysql版本并行运行

    mysql管理工具:mysql服务器需要客户端连接到服务器上进行管理.客户端有可能是个软件,也有可能是个java程序 安装mysql启用服务起别名+登录账号①mysqld install -m8;ne ...

  7. 解决Hbuliderx的代码不能自动补全的问题

    1.先关掉HBuilder X编辑器 2.找到安装目录下的reset.bat 3.点击reset.bat,提示"确认清除HBuilder X的所有配置吗? 按任意键回车继续,或输入N回车退出 ...

  8. 部署mall电商系统踩坑记录

    一. mysql docker run -p 3306:3306 --name mysql -v /mydata/mysql/log:/var/log/mysql -v /mydata/mysql/d ...

  9. npm报错最好的办法就是删掉依赖然后重装

    之前有个node工程,现在要新增antd主题,那得增加安装 craco 并修改 package.json 里的 scripts 属性 改吧改,安装一直报错: Cannot find module 'w ...

  10. 用js实现元素两个元素位置对齐

    一.问题描述 使得填表单位那一行字与下面的表格左对齐,对表格使用css中的margin:auto实现了居中,但是对那一行字(用div包裹的)使用margin:auto不生效:并且2021年下面对应的月 ...