vue 动态设置img的值

导演字母

于 2018-11-21 09:43:43 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue src img

本文链接：https://blog.youkuaiyun.com/qq_31001061/article/details/84313698

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种在Vue.js中根据当前路由动态切换按钮图片的方法。通过导入图片资源并在组件data中定义，利用三元运算符结合路由判断，实现图片源的动态变化，解决了直接在:src中写路径导致图片无法加载的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：依据当前路由点击按钮图片实现img

如果直接在:src中写路径会获取不到

<img :src="'/god'==$route.path?'./images/icon_index_sel.png':'./images/icon_index_nor.png'">

这样写的话会

获取不到

解决方法：

先引入图片

import index_nor from './images/icon_index_nor.png'
import index_sel from './images/icon_index_sel.png'

data(){
  return {
    imgUrl:{
      index_nor,
      index_sel,
	}
	}
}

使用

<span class="guide_item" :class="{'on':'/home'==$route.path}" @click="goTo('/home')">
  <span class="item_icon">
    <img :src="'/home'==$route.path?imgUrl.index_sel:imgUrl.index_nor">
  </span>
  <span>首页</span>
</span>