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. 给力的Zstack云主机

    合肥光源储存环纵向震荡可视化展示初步结果 前两天做好上面的可视化展示后,想着顺道把那个时间的二维图分析结果给出来吧,就又把纵向震荡的每个束团的频谱和相位顺道可视化显示出来,给计算这些结果的云主机又加点 ...

  2. Vue3 组件之间的数据传递

    1.组件分为:页面级组件和功能组件

  3. Ubuntu18完全卸载php7.2

    转载csdn: Ubuntu18完全卸载php7.2_yisonphper的博客-CSDN博客_ubuntu 卸载php8

  4. .net 中的几种事务

    在一个MIS系统中,没有用事务那就绝对是有问题的,要么就只有一种情况:你的系统实在是太小了,业务业务逻辑有只要一步执行就可以完成了.因此掌握事务处理的方法是很重要,进我的归类在.net中大致有以下4种 ...

  5. Mybatis连接数据库

    从零开始Mybatis连接数据库 创建Maven文件 File-->new-->project-->maven,点击next 配置 在出现的pom.xml文件中<project ...

  6. JAVA排序的方法

    //冒泡排序法: package fuxi;public class Bubble {    public static void main(String[] args) {        int a ...

  7. ISE_14.7_Windows10安装

    直接下载安装会报如下错误: There was an unexpected error executing Import ISE Virtual Appliance 解决方案 1.阅读xilinx手册 ...

  8. IIS部署WGCMS

    一.下载所需的微软程序文件 安装插件:下载后直接安装就可以了,没有什么好说的. 安装1:点击下载 安装2:点击下载 二.在IIS上添加应用程序池 打开IIS,按照图片所示:在"应用程序池&q ...

  9. Ubuntu 系统下搭建 SRS 流媒体服务器

    一.克隆项目 git clone https://github.com/ossrs/srs 二.执行编译 cd srs/trunk sudo ./configure && make 三 ...

  10. sql(上)例题

    一.数据库概述 数据库(DataBase,DB):指长期保存在计算机的存储设备上,按照一定规则组织起来,可以被各种用户或应用共享的数据集合. 数据库管理系统(DataBase Management S ...