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>