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;

}

}