是否可以从 Tailwind CSS 配置中传递背景图像作为道具？

Question

这是父组件

Camp.vue

<template>
    <section class="border-2 border-green-400 2xl:mx-auto max-w-[1440px] relative flex flex-col py-10 lg:mb-10 lg:py-20 xl:mb-20">
      <div class="overflow-hidden flex h-[340px] w-full items-start justify-start gap-8 overflow-x-auto lg:h-[400px] xl:h-[640px]">
        <CampSite
          BackgroundImage='bg-img-1'
          title="Putuk truno Camp"
          subtitle="Prigen"
          peopleJoined="50+ joined"
        />
      </div>
    </section>
</template>
  
<script setup>
import CampSite from '../Chunks/CampSite.vue';
</script>

这是子组件

Campsite.vue

<template>
    <div class="h-full w-full min-w-[1100px]" :class="props.BackgroundImage">
      
      CampSite1
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps(['BackgroundImage', 'title', 'subtitle', 'peopleJoined']);

</script>  

这是 Tailwind 配置文件

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./index.html","./src/**/*.{html,js,vue}"],
    theme: {
      extend: {
        colors: {
          green: {
            50: '#30AF5B',
            90: '#292C27',
          },
          gray: {
            10: '#EEEEEE',
            20: '#A2A2A2',
            30: '#7B7B7B',
            50: '#585858',
            90: '#141414',
          },
          orange: {
            50: '#FF814C',
          },
          blue: {
            70: '#021639',
          },
          yellow: {
            50: '#FEC601',
          },
        },
        backgroundImage: {
          'bg-img-1': "url('../src/assets/img-1.png')",
          'bg-img-2': "url('../src/assets/img-2.png')",
          'feature-bg': "url('../src/assets/feature-bg.png')",
          pattern: "url('../src/assets/pattern.png')",
          'pattern-2': "url('../src/assets/pattern-bg.png')",
        },
        screens: {
          xs: '400px',
          '3xl': '1680px',
          '4xl': '2200px',
        },
        maxWidth: {
          '10xl': '1512px',
        },
        borderRadius: {
          '5xl': '40px',
        },
      },
    },
    plugins: [],
  }

我试图将背景图像作为道具传递，并且该图像在 Tailwind 配置文件中声明，但当我在

:class

中引用它时它不会出现，并且我可以访问所有道具。

我做错了什么？

我尝试更改 Tailwind 配置中的文件路径，但这是正确的路径。

Answer 1

我解决这个问题很简单，但我一整天都在挣扎

<CampSite
      BackgroundImage='bg-bg-img-1'
      title="Putuk truno Camp"
      subtitle="Prigen"
      peopleJoined="50+ joined"
    />

我在图像名称之前添加了 bg 一词，仅此而已