vuejs绑定img 的src

1.显示本地图片:

<img src="../../common/images/auth-icon.png" />
 
2.绑定变量:
<img class="" :src="defaultIcon " />
data() {
  return {
  defaultIcon: require("../../common/images/merchant-portrait-1.png"),
  };
},
图片路径为:
 
 
3.绑定后台返回的图片地址:
<img class="top_portrait" :src="iconImg" />
data() {
return {
  iconImg: ""//存放src的变量
  };
},
methods: {
getInfo() {
this.token = sessionStorage.getItem("token");
console.log(this.token);
axios({
method: "GET",
url: "/apis/me",
headers: { Accept: "application/json", Authorization: this.token }
  }).then(data => {
  console.log(data.data);
  if (data.data.status_code == 200) {
    var merchantData = data.data.data.merchant;
    console.log(merchantData.logo);  //这是后台拿的src:http://p8rf5os6x.bkt.clouddn.com/business/fzn9jNaTtr4fXaBUkTQxrBjARDB70trT5poldRVA.jpeg
  }
  });
}
},
created() {
this.getInfo();
}
4.鼠标移入移出切换显示图片:
html:
<li class="item_2" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
  <img v-show="yellowIcon" src="../../common/images/comm-balack-icon.png" class="more_img"/>
  <img v-show="!yellowIcon" src="../../common/images/comm-yellow-icon.png" class="more_img"/>
</li>
js:
 data(){
  return{
  yellowIcon:true
  }
},
methods: {
  
//鼠标移入
onMouseEnter(){
  this.yellowIcon = !this.yellowIcon
},
//鼠标移出
onMouseLeave(){
  this.yellowIcon = true;
}
}
 
 

转载于:https://www.cnblogs.com/lan-cheng/p/9215654.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值