vue动态设置img的src路径实例


Posted in Javascript onSeptember 18, 2018

相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接当做字符串了,当然网上也有很多方法,这里使用的是最有效的方法。

看代码:

使用导入资源的方式

<template>
 <div @click="home">
  <img :src="home_url" alt="..." style="height: 10vw">
 </div>
</template>
<script>
 // 下面是导入两张图片的相对地址
 import home_no from '../static/icon/home_no.png'
 import home from '../static/icon/home.png'
 export default {
 name: "newbase",
 data () {
  return {
  home_url: home
  }
 },
 methods: {
  home() {
  this.home_url = home
  }
 }
 }
</script>

这样就可以非常有效的,动态改变img的图片路径。

以上这篇vue动态设置img的src路径实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 #Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 #Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 #Javascript
vue自定义tap指令及tap事件的实现
Sep 18 #Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 #Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 #Javascript
记React connect的几种写法(小结)
Sep 18 #Javascript
You might like
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python绘制雷达图实例讲解
2021/01/03 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
小学生期末评语大全
2014/04/21 职场文书
母亲节演讲稿
2014/05/27 职场文书
宣传口号大全
2014/06/16 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
公司出差管理制度范本
2015/08/05 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Golang二维数组的使用方式
2021/05/28 Golang
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Python获取字典中某个key的value
2022/04/13 Python