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 相关文章推荐
使用jQuery操作Cookies的实现代码
Oct 09 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
typescript配置alias的详细步骤
Aug 12 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基础学习笔记
2007/03/18 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
js操作select控件的几种方法
2010/06/02 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
vue实现购物车列表
2020/06/30 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
matplotlib实现区域颜色填充
2019/03/18 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python递归法解决棋盘分割问题
2019/07/17 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
文秘专业毕业生就业推荐信
2013/11/08 职场文书
运动会稿件50字
2014/02/17 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
pytorch中的 .view()函数的用法介绍
2022/03/17 Python