Vue3+Nuxt中如何通过v-bind将计算属性传入CSS的url()

你遇到的问题是，width的v-bind能正常生效，但-webkit-mask-image的url(v-bind(maskImage))无法工作，浏览器中显示为url(var(--xxxx-maskImage))。这是因为Vue在CSS中处理v-bind时，会将变量转为CSS自定义属性，但这个属性的值是相对路径字符串，浏览器无法正确解析该路径（CSS中的相对路径基于CSS文件位置，而非组件文件，且打包后资源路径可能变化）。

以下是两种可行的解决方案：

方案1：用new URL()生成绝对资源路径（推荐，适配Vite/Nuxt3） #

修改计算属性，通过new URL()结合import.meta.url解析出资源的绝对路径，确保浏览器能正确识别资源地址：

<template>
  <div class="box-container"></div>
</template>

<script lang="ts" setup>
const props = defineProps({
  maskImage: { type: String, default: '' },
  width: { type: Number, default: 100 }
})

const width = computed(() => props.width + 'px')
const maskImage = computed(() => {
  if (!props.maskImage) return ''
  // 解析资源的绝对路径，Vite会在构建时自动处理
  return new URL(`../assets/sprite/svg/${props.maskImage}.svg`, import.meta.url).href
})
</script>

<style lang="sass" scoped>
.box-container
  background-color: blue
  width: v-bind(width)
  -webkit-mask-image: url(v-bind(maskImage))
  -webkit-mask-position: center
  -webkit-mask-repeat: no-repeat
</style>

方案2：使用内联样式绑定 #

直接在模板中给元素绑定style属性，将mask-image写在内联样式里，Vue会自动处理静态资源路径：

<template>
  <div 
    class="box-container"
    :style="{
      width: width,
      '-webkit-mask-image': maskImage ? `url(${maskImage})` : 'none'
    }"
  ></div>
</template>

<script lang="ts" setup>
const props = defineProps({
  maskImage: { type: String, default: '' },
  width: { type: Number, default: 100 }
})

const width = computed(() => props.width + 'px')
const maskImage = computed(() => `../assets/sprite/svg/${props.maskImage}.svg`)
</script>

<style lang="sass" scoped>
.box-container
  background-color: blue
  -webkit-mask-position: center
  -webkit-mask-repeat: no-repeat
</style>

内容的提问来源于stack exchange，提问作者Miguel