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
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...!
© 2024 OneMinuteCode. All rights reserved.