[해결완료] 3. Vue 이미지 바인딩 오류

문제를 서술하라

• 무엇이: 이미지 바인딩
• 어디서: 사용자 프로필 페이지
• 어떻게: this.img 에 값이 담가지 않음
• 왜: Vue의 비동기적 특성 때문에

오답1. get 요청 성공 시 imgUrl 할당하기

created: function (){
    axios({
      method: 'get',
      url: `${process.env.VUE_APP_API_URL}/user/info`,
      headers: this.setToken()
    })
      .then(res => {
        const userInfo = res.data.user
        this.user = userInfo

      #############################################
        // if (userInfo.img) {
        //   console.log('yess')
        //   this.img = userInfo.imgUrl
        // } else {
        //   console.log('noo')
        //   this.img = '@/assets/chat.png'
        // }
######################################################

      })
      .catch(err => {
        console.log(err)
      })
  },
    

원인: Vue의 비동기적 특성 때문에 this.img에 아무것도 할당되지가 않았다.
그것이 아니라면 혹시 require를 붙이지 않아서 그랬나...??

오답2. template에서 v-if로 분기

<v-col v-if="user" cols="4">
       <div v-if="this.img">
          <img :src="imgUrl" alt="profile_img">
       </div>
	<div v-else>
          <img :src="imgUrl" alt="profile_img">
       </div>
</v-col>

가능은! 하지만 grid 때문에 요상한 위치로 갔다

정답 ~~~ 🥗

computed: {
    imgUrl: function () {
      if (this.user.img) {
        return this.user.imgUrl
      } else {
        console.log("@")
        return require('@/assets/chat.png')
      }

    }
  }

정답은 computed에 담아두기였다~~~!!!
행복 += 1

---

오늘의 배운점

혹시 바인딩 문제가 생긴다면 톡 때서 시도해보기