vue computed属性设置css背景图片

Question

前端萌新第一次提问
我给div动态绑定了一个style 就是利用计算属性随机显示背景图片
<div calss="login" :style="backgourndStyle">

computed:{
            backgourndStyle: function() {
                // 计算body可用高度
                let cHeight = window.outerHeight - (window.outerHeight - window.innerHeight);
                // 计算背景图
                let imgs = ["../assets/img/background1.jpg","../assets/img/background2.png"];
                let imgName = imgs[Math.floor(Math.random() * 2)];
                let style = "background-image:url(" + imgName + "); background-repeat: round; height:" + cHeight + "px;";
                return style;
            }
        },

但是图片总是显示不出来

console也不报错误

这是为什么呢？

Answer 1

require,或者文件放到static文件夹下，直接 '/static/...'

Answer 2

动态加载图片如果不是http/https开头的 需要使用requie/import导入 才能引用到图片

Answer 3

加这一行代码试试let imgs = imgPaths.map(path => require(path));

computed: {
    backgourndStyle: function() {
        let imgPaths = ["../assets/img/background1.jpg","../assets/img/background2.png"];
        let imgs = imgPaths.map(path => require(path));  // 加这一行代码
        let imgName = imgs[Math.floor(Math.random() * 2)];
        let style = "background-image:url(" + imgName + "); background-repeat: round; height:" + cHeight + "px;";
        return style;
    }
},