学无先后,达者为师

网站首页 编程语言 正文

UNI-APP,动态设置view的背景图片

作者:沧海龙腾LV 更新时间: 2024-02-28 编程语言
<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',
            };
        },
    }

示例

<view v-else class="video-pr bg-pt" :style="{backgroundImage: 'url(' + item.prc + ')'}"></view>
.video-pr{
			width: 710rpx;
			height: 400rpx;
		}
		
		.bg-pt{
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

示例2

<view v-else class="video-pr bg-pt" :style="[{'background-image':'url('+ item.prc +')' }]">
</view>

完!!!
 

原文链接:https://ly9527.blog.csdn.net/article/details/123128603

  • 上一篇:没有了
  • 下一篇:没有了
栏目分类
最近更新