Vue设置当请求的数据没有回来,img标签显示默认头像,数据回来显示请求回来的图片
一、首先html部分
<div class="avatar"> <img :src="docUrl ? docUrl : default_img" alt /> </div>
二、在JS中,根据请求回来的数据是null:{}或者有数据来判断头像显示,并引入本地静态图片
<script> export default { name: "name", props: {}, data() { return { docUrl: "", //头像 default_img: require("./img/defaultPhoto.png"), //默认头像,为什么要引入本地的静态图片,而不直接使用路径。是因为webpack底层会将图片转换成base64格式的图片,直接在img标签上写本地图片路径,会找不到此图片 }; }, mounted(){ this.getDoctorHomeData(); }, methods: { getDoctorHomeData() { //获取医生简介信息 this.$post("/doctor/queryDoctorById.action", { doctorId: this.doctorId }).then(response => { // console.log(response); let { docUrl, } = response.data || {}; //没有医生时,数据请求回来为空对象.如果不做或运算,会报错:TypeError:Cannot read property 'docUrl' of null at eval this.docUrl = docUrl; }); }, }, components: {} }; </script>
是我吖~