v-for로 배열 속의 url값들을 넘겨서 컴포넌트의 background-image로 사용하고 싶습니다
조회수 951회
카드 뉴스를 vue로 만들어 보는 중입니다 Card 컴포넌트가 카드뉴스에서 각각의 카드입니다 각 카드에는 각기 다른 말(content)이 쓰여지고, 각기 다른 이미지(link)가 배경으로 깔립니다. 일단 시험삼아 vue프로젝트에서 기본으로 제공하는 logo.png이미지를 불러와서 Card의 배경이미지로 넣어보려했는데 이미지가 안나오네요ㅠㅠ 아래는 app컴포넌트와 card컴포넌트의 코드와 결과 화면입니다
App.vue
<template>
<div id="app">
<Card v-for='item in arr' :key='item.id' :id='item.id' :content='item.content' :link='item.link' />
</div>
</template>
<script>
import Card from './components/Card'
export default {
name: 'app',
components: {
Card
},
data() {
return {
arr: [
{id:1, content:'Content1', link:'/src/assets/logo.png'},
{id:2, content:'Content2', link:'@/assets/logo.png'},
{id:3, content:'Content3', link:'@/assets/logo.png'}
]
}
}
}
</script>
Card.vue
<template lang='pug'>
.cardBox(:style="{ backgroundImage: 'url(' + link + ')' }")
span.id {{id}}
span.content {{content}}
</template>
<script>
export default {
name: 'Card',
props: ['id', 'content', 'link']
}
</script>
참고로 logo.png의 경로는 /src/assets/logo.png이며 css는 첨부하지 않았습니다
1 답변
-
지금은 계속 찾아가면서 어느정도 해결한거같아요 아래의 data속 imgUrl을 정의하는 require()안에 경로를 직접 적지 않고 props의 link를 넣을 수 있는 방법이 있을까요? 실제로 v-for을 돌면서 props의 내용이 계속 변하는데 그에 따라 imgUrl도 바뀌어야 합니다
export default { name: 'Card', props: ['id', 'content', 'link'], data() { return { imgUrl: require('@/assets/logo.png') } } }
imgUrl: require( [props의 link값] ) 이어야해요..!
댓글 입력