vuejs绑定img 的src

1.显示本地图片：

 

2.绑定变量：

" />

data() {

　　return {

　　defaultIcon: require("../../common/images/merchant-portrait-1.png"),

　　};

},

图片路径为：

 

 

3.绑定后台返回的图片地址：

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:

　　

　　

js:

 data(){

　　return{

　　yellowIcon:true

　　}

},

methods: {

　　

//鼠标移入

onMouseEnter(){

　　this.yellowIcon = !this.yellowIcon

},

//鼠标移出

onMouseLeave(){

　　this.yellowIcon = true;

}

}

 

 

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