vuejs绑定img 的src
2024-10-18 16:54:03
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;
}
}
最新文章
- 关于清除arp 缓存的那点事儿
- AngulaJS路由 ui-router 传递多个参数
- java批量生成excel代码分享
- AWS 搭建 VPN 服务(PPTP & L2TP) 整理
- 【Mysql】权限管理
- spring常用的工具类
- python中read、readline和readlines
- mysql的having语句
- Java 文件操作大全
- MySql中的时间类型datetime，timestamp，date，year比较
- UVA 10651 Pebble Solitaire(bfs + 哈希判重(记忆化搜索?))
- (转)IIS5.1的安装配置并发布ASP.NET网站
- CentOS 7 上搭建LNMP环境
- cocos2d-x快乐的做让人快乐的游戏3：cocos-2d 3.x中的物理世界
- （1）Two Sum--求数组中相加为指定值的两个数
- 浅谈web服务器的编写之http协议
- sublime text 的小细节设置,让你的代码更优美
- jQuery经典案例
- 《C#图解教程》 总览
- larave异步多图片上传的实现和注意事项及$file的对象函数