Issue
I' trying to pass a computed property value to a url() in css using v-bind with Vue 3 and Nuxt:
<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(() => `assets/sprite/svg/${props.maskImage}.svg`)
</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>
With this code, the computed width is working right, but the mask url isn't. In the inspector I can see that a kind hashed value is seted in mask-image: -webkit-mask-image: url(var(--20ff1bb8-maskImage))
How can I pass the value in the right way?
Solution
To make a css variable with url()
, you need to specify this function when defining:
const maskImage = computed(() => 'url(https://mdn.github.io/css-examples/masking/star.svg)');
Answered By - imhvost
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.