vue3.0 + vite css變量圖片路徑問題

問題描述

• 通過v-bind可以動態引入css變量，像顏色，像素大小這些都沒有什么問題，但是動態圖片路徑貌似就不可以css變量的使用

通過以下方式可以解決，但是需要對url提前進行處理然后通過v-bind使用（當然通過綁定動態屬性沒問題，但是不是我想要的用法）

<script lang="ts" setup>
    interface Background {
        type?: string // image video
        url?: string
        color?: string
    }
    const props = withDefaults(defineProps<Background>(), {
        type: 'image',
        url: `url(${new URL('../../assets/女孩子少女宇宙航天服8k動漫壁紙彼岸圖網.jpg', import.meta.url).href})`,
        color: 'red',
    })
</script>

<template>
    <div class="background">
        <slot></slot>
    </div>
</template>

<style scoped lang="less">
    .background {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-image: v-bind('props.url');
        background-position: center;
        background-size: cover;
    }
</style>

有更好的解決方法請留言