I’m using Laravel and Vue, in the blade template I’m calling a Vue component which I’m passing some props too, to try and be able to update the background image depending on window width:
Blade Template:
<component
bg="{{ asset('/images/desktopBG.webp') }}"
bgm="{{ asset('/images/mobileBG.webp') }}"
></component>
Component:
import { defineProps, computed } from 'vue';
const props = defineProps([ 'bg', 'bgm' ]);
const responsiveBG = computed(onresize = () => {
if (window.innerWidth < 768) {
console.log('background', props.bgm)
return props.bgm
} else {
console.log('background', props.bg)
return props.bg
}
})
<template>
<section id="container" :style="{backgroundImage: responsiveBG}"><section>
</template>
The props are pulling through fine which I can see when console logging and it updates on window resizing, but I can’t get it to be added a background image never mind change depending on the window width.
Any help would be appreciated? thanks
2
Answers
Since your function is returning an object
return {'--bg-color': props.bgm}
, it seems that this exact object is being passed as abackgroundImage
value. Background-image property cannot consume this value.Try to return correct css background-image value of type string as per MDN documentation
Try this: