Lo que estoy tratando de lograr:
Muestre una imagen desde un enlace dinámico en Post.vue, que sigue el diseño de PostLayout.vue
En PostLayout.vue, tengo un <slot> llamado postFeaturedImage, y dentro del slot hay un <div>, quiero usar la imagen como fondo.
Lo que estoy usando: Laravel, InertiaJS, Vue 3
Mis códigos son:
Post.vue:
<template> <PostLayout> <template #postfeaturedImage> <!-- Here I want to display the image --> </template> </PostLayout> </template> <script> import PostLayout from '@/Layouts/PostLayout' export default { data() { return { featured_image: '' } }, components: { PostLayout, }, props: { post: Object /* Passed the prop from Controller */ }, mounted () { this.featured_image = this.post.featured_image } } </script>PostLayout.vue:
<template> <slot name="postfeaturedImage" :bgImage="bgImage"> <div :style="`background-image:url(${bgImage}); height: 75vh;`"></div> </slot> </template> <script> export default { } </script>Agregue accesorios a su PostLayout.vue
<script> export default { props: { bgImage: { type: String }, }, }; </script>Y dale un valor a esos accesorios en tu Post.vue
<template> <PostLayout :bgImage="featured_image"> </PostLayout> </template>Y si alguna vez desea tener una publicación sin imagen y con un diseño diferente, debe hacer:
<template> <PostLayout> <template #postfeaturedImage> post without background image</template> </PostLayout> </template>Un enfoque alternativo será crear un componente FeaturedImage . Además, puede hacer referencia a la imagen de la publicación directamente desde los accesorios que recibe. En este caso, no es necesario el método de data y el mounted .
<template> <PostLayout> <template #postfeaturedImage> <FeaturedImage :src="post.featured_image" /> </template> </PostLayout> </template> <script> import PostLayout from '@/Layouts/PostLayout' import FeaturedImage from '@/Layouts/FeaturedImage' export default { components: { PostLayout, FeaturedImage }, props: { post: Object } } </script>