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>
그 전엔 이런식으로 써서 문제가 있었다.