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. 5步带你入门GaussDB(DWS)的GDS导入导出

    摘要:本篇文档为使用GDS导入示例的具体简单步骤和示例. 本文分享自华为云社区<带你快速入门GDS导入导出,玩转PB级数仓GaussDB(DWS)>,作者: yd_220527686. 1 ...

  2. Centos7搭建hadoop3.3.4分布式集群

    目录 1.背景 2.集群规划 2.1 hdfs集群规划 2.2 yarn集群规划 3.集群搭建步骤 3.1 安装JDK 3.2 修改主机名和host映射 3.3 配置时间同步 3.4 关闭防火墙 3. ...

  3. centos7.6安装teamviewer-原来还可以用yum 安装rpm包,自动解决依赖,太爽了

    1.在官网下载teamviewer安装包 2.安装.一直用rpm -ivh 的方式安装rpm包,但是不会自动解决依赖,今天才知道,原来还可以用yum -y install rpm包,自动解决依赖. [ ...

  4. Powershell删除文本指定内容所在行以下内容

    需求:批量获取文本指定内容所在行以下内容(含当前行) 解决方案:使用Powershell脚本处理 案例: 获取当前文件夹下所有txt文件 含文本"4"所在行以下内容(含当前行) 如 ...

  5. JZOJ 4296. 有趣的有趣的家庭菜园

    [NOIP2015模拟11.2]有趣的有趣的家庭菜园 题面 思路一 暴力 \(30\) 分! 很容易打,但是要注意: 开 \(\texttt{long long}\) 是非严格高于(等于是被允许的) ...

  6. 推荐系统[八]算法实践总结V1：淘宝逛逛and阿里飞猪个性化推荐：召回算法实践总结【冷启动召回、复购召回、用户行为召回等算法实战】

    0.前言:召回排序流程策略算法简介 推荐可分为以下四个流程,分别是召回.粗排.精排以及重排: 召回是源头,在某种意义上决定着整个推荐的天花板: 粗排是初筛,一般不会上复杂模型: 精排是整个推荐环节的重 ...

  7. Stable Diffusion 关键词tag语法教程

    提示词 Prompt Prompt 是输入到文生图模型的文字,不同的 Prompt 对于生成的图像质量有较大的影响 支持的语言Stable Diffusion, NovelAI等模型支持的输入语言为英 ...

  8. vue中使用xlsx 导出表格

         <t-table v-show="false" id="exportTab" row-key="index" :data=& ...

  9. 解决html2canvas.js和pdf.js导出页面问题

    最近在做项目时有这么一个需求,需要将当前html页面导出pdf到本地.由于之前是做过类似的功能的借助了两个插件分别是html2canvas.js和pdf.js,本以为是非常顺利就能完成的,实际在使用过 ...

  10. git手记

    参照的是http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000这里的,git教程确实写得不 ...