Vue.js ) 폴더에있는 local img를 데이터모델로 받아온 후 페이지에 로드하기

하 .. 이것만 이틀걸렸다 ㅋㅋ 아무리 코드만 봐도 문제가없고 개발자도구 network 에서 status 200 인데 프리뷰가 흰색이여서 ..넘 ㅠ 괴로웠는데 해결방법을 찾았다.

data에서 받아오는 형식이면 require이 필요하다.

 

( * DB에서 데이터를 가져오는것이 아닌 js 파일에서 데이터 모델을 만든 후 가져오는 형식입니다.)

// dataModel.js 

const data = [
  {
    id: 1,
    name: '묘묘',
    title: '타이틀.',
    content: '뿌려야하는 설명'
    // image: "require('@/images/concordiaReview.jpg')",  -> status 304 
    // 200 근데 안뜸 image: './assets/concordiaReview.jpg', -> status 200 인데 빈화면 
    image: require('@/assets/image.jpg'),  //-> 이건 된다 
  },
 	... blah blah 
]

export default {
  list (query) {
    return new Promise(resolve => {
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        resolve(data)
      }, 200)
    })
  }
}

 위의 데이터모델을 가져온 후 ul li 리스트 형태로 뿌린다면

 // listComponent.vue 
 
 <ul>
      <li v-for="(item,idx) in data" v-bind:key="idx" >
        <img v-if="item.image" v-bind:src="item.image" />
         {{item.name}}
         <p> {{item.title}} </p>
        <p>{{item.content}}</p>
      </li>
    </ul>

이렇게하면 데이터가 정상적으로 나옵니다 : )  

 

 

결과 화면