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는 첨부하지 않았습니다

  • 실제 이미지가 없는가본데요. Network 탭에서 이미지들은 로딩되고 있나요? 엽토군 2020.1.23 23:36
  • 실제로 logo.png 파일은 /src/assets/에 있는데 이를 요청하는 request url이 ttp://localhost:8080/src/assets/logo.png이라고 뜸에도 불구하고 이미지는 표시되지 않고 Status는 304입니다 bvv8808 2020.1.23 23:56

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값] ) 이어야해요..!

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)