vue3 - 来自变量的响应式背景图像

Question

我正在使用 Laravel 和 Vue，在刀片模板中我调用了一个 Vue 组件，我也传递了一些道具，以尝试能够根据窗口宽度更新背景图像：

刀片模板：

<component 
    bg="{{ asset('/images/desktopBG.webp') }}"
    bgm="{{ asset('/images/mobileBG.webp') }}"
></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 {'--bg-color': props.bgm}
    } else {
        console.log('background', props.bg)
        return {'--bg-color': props.bg}
    }
})

<template>
    <section id="container" :style="{backgroundImage: responsiveBG}"><section> 
</template>

道具正在很好地拉动，我可以在控制台日志记录时看到它，并且它会在窗口调整大小时更新，但我无法添加背景图像，更不用说根据窗口宽度进行更改。

有任何帮助吗？谢谢

Answer 1

由于您要返回一个对象

return {'--bg-color': props.bgm}

，因此似乎这个确切的对象正在作为

backgroundImage

值传递。

尝试根据 MDN 文档

返回字符串类型的正确 css 背景图像值