在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 }, }) }