vue3 dynamic binding background image method example

introduction

Sometimes I encounterimgTag ordivTo set the requirements for background images, the resource file may need to be dynamically bound after a second judgment. Record the pitfalls encountered in your work

Img tag src attribute function obtain

This method can avoid binding responsive data responsive

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

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

sass syntax set background picture

yesOrNoIt is responsive data

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

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

Binding implementation through style, ref, reactive

backgroundImageThe format is still implemented according to the specifications, herereforreactiveCome to bindback_imageAll can be achieved.

<div :style="back_image">

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

The above is the detailed content of vue3 dynamic binding background pictures. For more information about vue3 dynamic binding background pictures, please follow my other related articles!