I want to use it as a background-image for components by passing the url values in the array with v-for

I'm trying to make the card news into a vue Card components are each card in the card news Each card has a different content Different images (links) are set in the background. As a test, I tried to get the logo.png image that the vue project provides as a basic and put it as the background image of the card, but the image is not coming outcrying Below is the code and result screen of the app component and card component

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>

For your information, the path of logo.png is It is /src/assets/logo.png and css is not attached

vue html

2022-09-22 15:29

1 Answers

I think I've worked it out while I've been looking for it Do not write the path directly in the require() that defines the imgUrl in the data below Is there a way to put the link of props? In fact, as we go around v-for, the contents of props keep changing, and the imgUrl has to change accordingly

export default {
    name: 'Card',

    props: ['id', 'content', 'link'],

    data() {
        return {
            imgUrl: require('@/assets/logo.png')
        }
    }
}

imgUrl: require ([link value of props]) You have to continue...!

2022-09-22 15:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656