Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 귀여운 웹디자인
- jquery 웹디자인
- 이쁜 웹디자인
- IR기법
- 유니크
- 이미지 리플레이스먼트
- 신박한 디자인
- Image Replacement
- 배경이 이쁜 웹디자인
- 디자인
- 3D
- 시맨틱
- 마크업
- 일러스트
- jQuery
- 우주 웹디자인
- 스크롤 웹사이트
- 웹디자인
- 접근성
- mark up
- 웹 접근성
- 특이한 웹디자인
- 마우스오버
- 시맨틱 마크업
- 사람 일러스트
- 웹사이트
- 스크롤 웹디자인
- 신박한 웹디자인
- 스크롤
- 깔끔한 웹디자인
Archives
- Today
- Total
Play Ground
[vue] img src data binding 본문
부모 컴포넌트의 <script></script> 부분
this.items = [ { "title": data.item_type[100], "img": require("@/assets/img/i-move.png") }, { "title": data.item_type[200], "img": require("@/assets/img/i-rainbow.png") }, { "title": data.item_type[300], "img": require("@/assets/img/i-random.png") } ]
자식 컴포넌트의 <template></template> 부분
<div v-for="item in items")
<img :src="item.img" height="45">
</div>
짧게 설명하자면
처음엔
"img" : "../../assets/img/i-move.png"
이런식으로 작성하였는데 이미지를 제대로 가져오지 못하더라..(404 에러)
그래서 구글링한 결과, require로 이미지를 가져온 후 이걸 고대로 쏴주면 (props나 evnetbus나 vuex 등을 이용해서)
이미지가 잘 출력된다.
'Programming > Vue.js' 카테고리의 다른 글
[vue.js] Eventbus 만들기 (0) | 2018.10.22 |
---|---|
[Vue.js] 페이징 로직 (0) | 2018.10.22 |
[Vue.js] promise 사용하기 (0) | 2018.09.20 |
[Vue.js] class를 만들어 vue객체 사용하기 (0) | 2018.09.20 |
[Vue.js] mixin 전역 등록하기 (0) | 2018.09.20 |
vue.js radio button 토글 이벤트 걸기 (0) | 2018.07.12 |
vue.js axios로 데이터 가져와서 이벤트 걸기 (0) | 2018.07.10 |
vue.js jquery import syntax error (0) | 2018.07.05 |