zoukankan      html  css  js  c++  java
  • 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;
    }
    }
     
     
  • 相关阅读:
    《区域经济分析方法》读书笔记
    系统规划思想
    《区域分析与规划高级教程》读书笔记
    经济社会发展投资决策支持平台
    关于区域货物运输预测研究
    (转)所有程序员都应该至少读上两遍的十篇论文
    文明的出现
    (转)所有架构师都应该至少读上两遍的十篇论文
    鸡蛋这样吃有害健康
    OOA/D学习笔记 1
  • 原文地址:https://www.cnblogs.com/lan-cheng/p/9215654.html
Copyright © 2011-2022 走看看