转：www.cnblogs.com/lan-cheng/p…
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> data(){ return{ yellowIcon:true }},methods: { //鼠标移入onMouseEnter(){ this.yellowIcon = !this.yellowIcon},//鼠标移出onMouseLeave(){ this.yellowIcon = true;}}
