Блог

Чего я пытаюсь достичь:
Отобразить изображение из динамической ссылки в Post.vue, которое соответствует макету PostLayout.vue

В PostLayout.vue у меня есть <слот> с именем postFeaturedImage, и внутри слота есть <слот><div>, я хочу использовать изображение в качестве его фона.

Что я использую: Laravel, InertiaJS, Vue 3

Мои коды таковы:

Сообщение.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>
 

Я удалил все ненужные коды. Я новичок в Vue 3 и инерции и нуждаюсь в помощи!

Альтернативным подходом будет создание FeaturedImage компонента. Кроме того, вы можете ссылаться на почтовое изображение непосредственно из реквизита, который вы получаете. В этом случае нет необходимости в data методе и 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>
 

Добавьте реквизит в свой PostLayout.vue

 <script>
export default {
  props: {
    bgImage: { type: String },
  },
};
</script>
 

И оцените этот реквизит в своем посте.vue

 <template>
    <PostLayout :bgImage="featured_image"> </PostLayout>
</template>
 

И если вы когда-нибудь захотите опубликовать пост без изображения и другого макета, вам следует это сделать :

 <template>
    <PostLayout>
      <template #postfeaturedImage> post without background image</template>
    </PostLayout>
</template>