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. Activiti01-基本介绍

    1.工作流的定义 工作流是将一组任务组织起来以完成某个有序的过程:定义了任务的触发顺序和触发条件,而且每个任务可以由一个或多个软件系统完成,也可以由一个或一组人完成, 还可以由一个或多个人与软件系统协 ...

  2. Mybatis Plus （特性、快速入门、日志、CRUD）

    Mybatis plus 可以节省很多的工作,所有的CRUD JPA yk-mapper Mybatis plus 偷懒的 简介: MyBatis-Plus(opens new window)(简称 ...

  3. Cesium用wsad进行场景漫游(九)

    2023-01-14 先看效果,wsadqe控制方向升降,鼠标拖动屏幕也可以控制方向 整理下思路: 1. 使用movement变量控制是否进行漫游 2.1 进行漫游则先将enableRotate等全部 ...

  4. Git基础操作及协作流程

    一整套流程帮你实践整个 Git 操作基础流程. 来源:https://docs.microsoft.com/zh-cn/learn/paths/intro-to-vc-git/ Git 介绍 配置 G ...

  5. el-input只能输入数字和小数

    1.oninput ="value=value.replace(/[^\d]/g,'')" //只能输入数字 2.oninput ="value=value.replac ...

  6. LRU 居然翻译成最近最少使用？真相原来是这样！（附力扣题解）

    前言 相信有很多同学和我一样,第一次碰到 LRU(Least Recently Used) 的这个解释「最近最少使用」都不知道是什么意思,用汤家凤老师的话来说: 我真的感到匪夷所思啊! 最近是表示时间 ...

  7. GIS若干相关的概念

    投影 常用的投影坐标系: CGCS2000_3_Degree_GK_CM_111E CGCS2000_3_Degree_GK_Zone_37 CGCS2000_GK_Zone_19 Beijing_1 ...

  8. android 投屏

    https://blog.csdn.net/aa464971/article/details/83349215

  9. nginx部署+将安装包打包到requirements.txt文件中

      pip freeze > requirements.txt 将在虚拟环境中安装的包记录到requirements.txt里 详解见https://www.jianshu.com/p/dba8 ...

  10. RTFormer: Efficient Design for Real-Time Semantic Segmentation with Transformer概述

    0.前言 相关资料: arxiv github 论文解读 论文基本信息: 发表时间:NeurlPS2022(2022.10.13) 1.摘要 最近,基于Transformer的网络在语义分割方面取得了 ...