Play Ground

[vue] img src data binding 본문

Programming/Vue.js

[vue] img src data binding

haeru 2018. 9. 7. 15:36

부모 컴포넌트의 <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 등을 이용해서)

이미지가 잘 출력된다.