Buenas estoy probando en pasar imagenes usando Props, estoy realizando por Computed y v-bind:style pero no se ejecuta, ando tratando de usar la función o la imagen pero no me muestra error alguien sabe porque sera? o como puedo pasar imagenes a través de props, de una forma sencilla porfavor?
Home
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<CardPortfolio description="hola" imagen="../assets/wallpaper.jpg"/>
</div>
</template>
<script>
// @ is an alias to /src
import CardPortfolio from '@/components/CardPortfolio.vue'
export default {
name: 'Home',
components: {
CardPortfolio
}
}
<template>
<div class="card-portfolio" @mouseenter="show" @mouseleave="show" :style="imageUrl">
<div class="card-hover" v-show="showCard">
{{description}}
</div>
</div>
</template>
<script>
export default {
props:['description', 'imagen'],
data(){
return{
showCard: false,
}
},
computed:{
imageUrl() {
return {"background-imagen": "url('"+this.imagen+"')"}
}
},
methods:{
show(){
this.showCard = !this.showCard
}
}
}
</script>
background-image
, sinn
, intenta con eso