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>

有更好的解决方法请留言