캐릭터 이미지 받아오기 (3/6)

이번엔 네임 플레이트에 들어갈 캐릭터 썸네일을 가져올것이다.

근데 이전에 만들어둔 썸네일을 가져오는 함수가 잘 작동하다가 오류가 발생해 자세히 보니 최근 확장팩 업데이트를 하면서 api의 형식이 조금 바뀌어서 최근 플레이를 한 캐릭터를 검색할 경우 썸네일이 제대로 불러와지지 않는 문제가 있었다.

따라서 이 부분에 대해서 예외처리를 해줄 필요가 생겼다.

export function getCharacterMedia(store){
  this.$axios.$get(`https://kr.api.blizzard.com/profile/wow/character/${store.state.realmSlug}/${store.state.characterName}/character-media`,{
    params:{
      region:'kr',
      namespace:'profile-kr',
      locale:'en_US',
      access_token: store.state.accessToken
    }
  })
    .then(function (response) {
      console.log(response)
      if(response.hasOwnProperty('assets')){
        store.commit('setCharacterMedia',getCharacterMediaUrl_New(response))
      }
      else{
        store.commit('setCharacterMedia',getCharacterMediaUrl_Old(response))
      }
    })
    .catch(function (error) {
      console.log(error)
    })
}

function getCharacterMediaUrl_Old(rawData){
  let mediaUrl ={
    bust: rawData['bust_url'],
    avatar: rawData['avatar_url'],
    render: rawData['render_url']
  }
  return mediaUrl
}

function getCharacterMediaUrl_New(rawData){
  let mediaUrl ={}
  rawData['assets'].forEach(img=>{
    mediaUrl[img['key']] = img['value']
  })
  return mediaUrl
}

 

이후 nameplate 컴포넌트를 수정해준다

<template>
  <v-layout
    row
  >
    <v-flex
      class="px-6"
      xs12>
      <v-card>
        <v-layout>
          <v-img
            xs2
            min-height="150px"
            min-width="150px"
            max-width="180px"
            max-height="180px"
            :src=imgSource
          ></v-img>
          <v-flex xs12>
            <v-card-title primary-title>
              <v-col
                xs="12"
                md="5"
                lg="2"
                style="min-width: 400px;"
              >
                <h5>{{this.$store.state.characterProfile['title']}}</h5>
                <h1 :style="characterNameStyle">
                  {{this.$store.state.characterName}}
                </h1>
                <!--<h1 style="color: #d59012">color test</h1>-->
              </v-col>
              <v-col xs="12" md="6">
                <v-row>
                  <h3 v-if="this.$store.state.characterProfile['level']">
                    {{this.$store.state.characterProfile['equipped_item_level']}} LV
                  </h3>
                </v-row>
                <v-row>
                  {{this.$store.state.characterProfile['level']}}
                  {{this.$store.state.characterProfile['race']}}&nbsp
                  <span :style="characterNameStyle">{{this.$store.state.characterProfile['active_spec']}}</span>&nbsp
                  <span :style="characterNameStyle">{{this.$store.state.characterProfile['character_class']}}</span>
                </v-row>
                <v-row>
                  <span style="color: #ffa500;" v-if="this.$store.state.characterProfile['guild']">
                    <{{this.$store.state.characterProfile['guild']}}>
                  </span>
                  &nbsp
                  {{this.$store.state.characterProfile['realm']}}
                </v-row>
              </v-col>
              <v-col>

              </v-col>
            </v-card-title>
          </v-flex>
        </v-layout>
      </v-card>
    </v-flex>


  </v-layout>
</template>

<script>
  export default {
    name: "NamePlate",
    data(){
      return{
      }
    },
    computed: {
      imgSource:function(){
        return this.$store.state.characterMedia['avatar']
      },
      characterNameStyle: function () {
        let red = 255
        let green = 255
        let blue = 255
        let alpha = 255
        let characterClass = this.$store.state.characterProfile['character_class']

        let characterRGBA = {
          none: [255, 255, 255, 255], // RGBA
          Warrior: [175, 145, 100, 255],
          Mage: [140, 200, 255, 255],
          'Death Knight': [205, 0, 0, 255],
          Hunter: [130, 210, 90, 255],
          Priest: [255, 255, 255, 255],
          'Demon Hunter': [130, 60, 120, 255],
          Monk: [70, 210, 150, 255],
          Paladin: [255, 170, 220, 255],
          Rogue: [240, 255, 150, 255],
          Shaman: [40, 60, 255, 255],
          Warlock: [100, 70, 200, 255],
          Druid: [210, 145, 20, 255]
        }
        if (characterRGBA.hasOwnProperty(characterClass)) {
          return {
            color: `rgba(
            ${characterRGBA[characterClass][0]},
            ${characterRGBA[characterClass][1]},
            ${characterRGBA[characterClass][2]},
            ${characterRGBA[characterClass][3]})`
          }
        } else {
          return {
            color: `rgba(
            ${characterRGBA['none'][0]},
            ${characterRGBA['none'][1]},
            ${characterRGBA['none'][2]},
            ${characterRGBA['none'][3]})`
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>

 

이미지 소스가 실시간으로 변경되면 적용될 수 있도록 computed에 imgSource를 넣어주고 img태그의 src에 바인딩해준다 

처음엔 모르고 data부분에 넣어주었는데, 이렇게 하면 다른 캐릭터를 검색할 때에 이미지가 변하지 않더라. 

원래 이번 포스팅에 auto나 waterfall을 이용해 콜백 교통정리를 해줄 생각이었는데... 검색한대로 시도해보아도 잘 되지 않아 여기서 포스팅을 끊어 가겠다