vue3 动态绑定背景图片

有时候会遇到给img标签或者div设置背景图片的需求，资源文件可能需要经过二次判断来动态绑定。记录一下工作中遇到的坑

img标签src属性函数获取

这种方式可以避开绑定响应式数据响应式

        <img
            :src="getSource()"
            alt=""
            class="banner_img"
        />

const getSource = () => {
    return yesOrNo ?
        new URL('../../path1', import.meta.url).href :
        new URL('../../path2', import.meta.url).href
}

sass语法设置背景图片

yesOrNo是响应式数据

.set_bg_img {
    @if #{yesOrNo} {
        background: url('img1');
    }

    @else {
        background: url('img2');
    }

通过style，ref，reactive来绑定实现

backgroundImage格式依然按照规范来实现,这里用ref或者reactive来绑定back_image都可以实现。

<div :style="back_image">

const back_image = ref({
    backgroundImage: yesOrNo ?
        `url(${new URL('path1', import.meta.url).href})` :
        `url(${new URL('path2', import.meta.url).href})`
})