Vue3 - 可以将道具绑定到样式中的背景图像吗？

Question

假设我有以下组件：

<template>
  <q-layout view="lHh lpR lFf">
    <q-page-container>
      <div class="image-container">
        Image Container
      </div>
      <slot />
    </q-page-container>
  </q-layout>
</template>

<script lang='ts' setup>
  const props = defineProps({
    image: { type: String, required: true, default: '' },
  });
  // console.log(image);
</script>

<style lang="scss" scoped>
  .image-container {
    display: none;

    @media (min-width: $breakpoint-sm-min) {
      background: v-bind("props.image") no-repeat left center fixed;
      display: block;
      background-size: cover;
      height: 100%;
      width: auto;
    }
  }
</style>

我可以验证该 prop 是否正确地作为字符串传递，并且根据文档，我可以使用它v-bind更轻松地将动态值插入到样式中。

但图像没有显示，当我打开检查器时我看到了这一点：

我也尝试过包裹v-bind内部的各种变体url()，但似乎没有任何效果。这对于 Vue3 来说还不可能吗？

注意：我目前使用的是 Vue v3.2.29。

Answer 1

感谢评论中的@tony19，我们发现我的想法并不算太远。本质上，我没有尝试在 css 中使用url()，而是将其移至传递 prop 的父级。

家长.vue

<template>
  <Child :image="`url(${image})`">
    ...
  </Child>
</template>

儿童.vue

<template>
  <q-layout view="lHh lpR lFf">
    <q-page-container>
      <div class="image-container">
        Image Container
      </div>
      <slot />
    </q-page-container>
  </q-layout>
</template>

<script lang='ts' setup>
  const props = defineProps({
    image: { type: String, required: true, default: '' },
  });
</script>

<style lang="scss" scoped>
  .image-container {
    display: none;

    @media (min-width: $breakpoint-sm-min) {
      background: v-bind("props.image") no-repeat left center fixed;
      display: block;
      background-size: cover;
      height: 100%;
      width: auto;
    }
  }
</style>