vue uniapp 动态设置页面背景图

在uniapp中的背景图需要动态变换 一般结合后台返回数据渲染

很简单 但是每次都记不住 自己写写加深印象

这里是简单的html 代码

<view class="loginBg" :style="{
    
    backgroundImage: 'url(' + imageURL + ')',
  'background-repeat':'no-repeat', backgroundSize:'100% 100%'}">										
</view>

这里需要在data中定义一下

export default {
    
    
		data() {
    
    
			return {
    
    
			//此处如果是写死图片 可以直接像我这样写上 如果要拿后台渲染也可以直接空白 不写图片地址 
			//我在这里写上 如果后台没有返回图片 我可以只写显示这张默认图片
				imageURL:'http://sjbz.fd.zol-img.com.cn/t_s1080x1920c/g3/M02/0E/0D/ChMlV17oT-6IZ0ZcACCEJ-b0kqYAAU0mQJzD-4AIIQ_684.jpg',
			};
		},
	}

这里是我去请求后台数据返回图片

// 获取背景图
		backgroundMap(){
    
    
		//[这里是我直接封装的请求组件地址](https://editor.csdn.net/md/?articleId=107078839)
			this.$apiReq.req({
    
     // 创建对象
				url: '/ui/shop/banner/list', // 示例请求路径
			    method:"get",
				data : {
    
    
				},
				success: (res) => {
    
    
				    //后台返回指定的图片 这边直接渲染就可以了
					this.imageURL=res.data.rows[2].bannerImg
				},
			 })
		}