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 是否正确地以字符串形式出现，并且根据 docs 我可以使用 v-bind 更轻松地向样式插入动态值。

虽然图像没有显示，但我在打开检查器时看到了这个：

我也尝试过将 v-bind 包裹在 url() 内的变体，但似乎没有任何效果。 Vue3 还不能做到这一点吗？

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

Answer 1

感谢评论中的 @tony19，我们发现我离太不远了。本质上，我没有尝试在 css 中使用 url()，而是将其移至传递道具的父项。

Parent.vue

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

Child.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>

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

Vue3 - possible to bind prop to background-image in style?

vue.js

vuejs3