
[Vue] img 태그에 v-bind를 활용하여 src 속성에 이미지 경로를 주고 이미지를 가져와 보자.
FrontEnd/Vue
2022. 2. 12. 23:08
오늘 유튜브를 보면서 Vue 기초부터 하나하나 공부하고 있었다. 영상에서는 이미지 경로를 그냥 넣었는데, 나는 v-bind 함수를 가지고 src속성에 경로를 넣어주려고 하였다. 그래서 처음 짠 코드가 아래였다. 우선 배열의 길이는 3이므로, v-for문이 3번 돌고, 이미지 파일은 아래와 같이 연속 된 숫자를 가졌다 room0.jpg room1.jpg room2.jpg 그래서 그냥 getSrc함수를 아래와 같이 짰다. getSrc : function(index){ return './assets/room'+index+'.jpg'; } 이렇게 짜면 v-for문의 index값이 0, 1, 2 순으로 들어 올테고, 각 이미지 경로를 src로 적재되니, 당연히 가져 올 줄 알았는데... 실행해보니 이미지를 가져오..