v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법) 강의를 들으면서 코딩중 이상한 점이 있어 여쭤봅니다.
응용하여 반복문을 통한 이미지불러오기를 하려고하는데 경로와 파일명이 맞음에도 불구하고 아래와 같이 에러가 뜬다면
무엇을 봐야할까요? 구글에도 딱히 이유가 나오지 않아 여쭤봅니다.
======================
에러내용은 다음과 같습니다
Failed to compile.
./src/assets/원룸.JPG 1:0 Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
=====================
app.vue
<template>
<div class = "menu">
<a v-for="메뉴 in 메뉴들" :key="메뉴">{{메뉴}}</a>
</div>
<div v-for="(가격,i) in 가격리스트" :key="i">
<img src="./assets/원룸.JPG">
<img :src="이미지리스트[i]">
<h4>{{원룸리스트[i]}}</h4>
<h4>{{가격리스트[i]}}</h4>
<button @click="허위매물카운트[i]++">허위매물</button> <p>{{허위매물카운트[i]}}</p>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
data() {
return {
메뉴들 : ['Home', 'Detail','About'],
원룸리스트 : ['산본원룸', '당정원룸','금정원룸'],
가격리스트 : [50, 60, 70],
허위매물카운트 : [0, 0, 0],
이미지리스트 : ['./assets/원룸.jpg', './aassets/log.png', './aassets/log.png'],
}
}
}
</script>
<style>
.menu{
background : darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a{
padding: 15px;
color: white;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
