어? 되네?

svg 이미지가 자꾸 안 불러와지는 문제가 있었음

template 위치에서 require 안에 data를 binding하려니까 안되는 것 같아서 이것저것 시도해보다가 안돼서 때려쳤었는데 오늘 갑자기 되길래 쓰는 개발일기 두둥

해결된 코드

<div v-for="image in imgList" :key="image.id">
        <div
          class="profile-image"
          v-if="image.name.search(this.$store.state.auth.image) != -1"
        >
          <img :src="image.name" />
        </div>
      </div>

...

data() {
    return {
      currentUser: { username: '', email: '', userInfo: '', image: '' },
      profile: '',
      imgList: [
        { id: 0, name: require('@/assets/img/profile/profile_sc_o.svg') },
        { id: 1, name: require('@/assets/img/profile/profile_sc_p.svg') },
        { id: 2, name: require('@/assets/img/profile/profile_sc_r.svg') },
        { id: 3, name: require('@/assets/img/profile/profile_sc_b.svg') },
        { id: 4, name: require('@/assets/img/profile/profile_sc_y.svg') },
        { id: 5, name: require('@/assets/img/profile/profile_sq_b.svg') },
        { id: 6, name: require('@/assets/img/profile/profile_sq_o.svg') },
        { id: 7, name: require('@/assets/img/profile/profile_sq_p.svg') },
        { id: 8, name: require('@/assets/img/profile/profile_sq_r.svg') },
        { id: 9, name: require('@/assets/img/profile/profile_sq_y.svg') },
        { id: 10, name: require('@/assets/img/profile/profile_tr_b.svg') },
        { id: 11, name: require('@/assets/img/profile/profile_tr_o.svg') },
        { id: 12, name: require('@/assets/img/profile/profile_tr_p.svg') },
        { id: 13, name: require('@/assets/img/profile/profile_tr_r.svg') },
        { id: 14, name: require('@/assets/img/profile/profile_tr_y.svg') },
      ],
    };
  },

데이터에 이미지 다 때려박고 id로 v-for 돌리니까 일단 이미지가 나오긴 나온다.
100% 해결 된 건지는 모르겠다.
담부턴 화나게 하지말고 한번에 실행되어주면 고마울 것 같아

에러 났던 코드

        <div class="profile-image">
          <img :src="require(`@/assets/img/profile/${image}.svg`)" />
        </div>

그 전엔 이런식으로 써서 문제가 있었다.