아직 강의 초반부를 듣고 있습니다.
assets/img/ 폴더에 jpg 파일들을 넣어 놓은 상태이고
각 파일명은 room0.jpg, room1.jpg, room2.jpg 입니다
이 이미지들을 들고오기 위해 v-for문을 사용하여
<template>
<div v-for="(item, idx) in products" :key="item">
![]()
![]()
</div>
</template>
<script>
export default {
name: 'App',
data() { // 데이터 보관함
return {
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
}
</script>
라는 식으로 코드를 짜 보았는데 이미지 파일을 잡아오지 못합니다.
검색 끝에 v-bind 함수를 이용하여
<template>
<div v-for="(item, idx) in products" :key="item">
</div>
</template>
<script>
export default {
name: 'App',
data() { // 데이터 보관함
return {
getSrc : function (index) {
return require('./assets/img/room' + index + '.jpg');
},
products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
}
},
}
</script>
이렇게 require 함수를 사용하면 되고,
안되는 이유가 require 함수를 사용하지 않으면 단순 문자열(string)로만 인식해서 안된다고 하는데
도무지 이게 무슨 말인지 이해를 못하겠습니다.
src 경로를 받아오는 것도 결국은 문자열로 경로를 찾는다는 말 아닌가요?
경로 파싱과정에서 string은 인식을 못한다는 말인가요?