0

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>

introducir la descripción de la imagen aquí

3
  • La propiedad es background-image, sin n, intenta con eso el 15 ago. 2020 a las 18:30
  • gracias por responder, pero igual sigue sin salir la imagen
    – user112914
    el 15 ago. 2020 a las 18:46
  • Tiene mas que ver con la ruta de la imagen, si el componente hijo esta en el mismo folder que el padre es probable que funcione, de otra manera no va a funcionar por que la ruta estaria alterada. Inspeccionando la etiqueta de la imagen deberias ver la ruta que busca en el navegador.
    – deadPoet
    el 21 ago. 2020 a las 3:54

1 respuesta 1

0

El problema es que cuando pasas una imagen desde los assets, esto en realidad se pasa como un texto en los componentes y por ello no muestra nada, por que la etiqueta imagen de html espera una url, puedes intentar:

  1. primero importar la imagen el componente Home
  2. Crear una data que represente esa imagen
  3. Luego ya pasar la imagen en las props del componente
<template>
    <CardPortfolio description="hola" :imagen="fondo"/>
</template>

<script>
   // assets
  import bgImg from '@/assets/img/image_fondo.png'
  
  export default {
    name: 'home',
    data() {
      return {
        fondo: bgImg
      }
    },
  }
</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.