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>