1、通过require() 引入图片:require('@/static/1.png')}, 2、引用背景图片:background-image:url('~@/static/logo.png'); :style="{backgroundImage:'url('+imagesrc+')'}"
1.动态设置背景 注意本地图片路径要~@开头,并且是相对路径,如果是线上路径就无所谓 直接写路径就行了 代码 :style="{backgroundImage:`url(${isZhiBo?contentBacStar:contentBacStop})`}" background-size:100%; background-repeat: no-repeat; contentBacStar:"~@../../static/img/zhibo1.png", content...
:style="{backgroundImage: 'url('+item.memberVipBg+')'}" 由于后台不想下发背景图片,所以需要前端自己改造数据,新增字段,由于每个swiper-item 背景图都不一样,所以需要动态设置。但是如果对每一个swiper-item逐一判断,再添加背景图相对来说比较繁琐。所以此处转换一下思路,在data里面先定义几个背景图,然后根据...
/* 推荐~@绝对路径引入 */background-image:url("~@/static/images/home/home_bg.png");
/* 绝对路径 */background-image:url(/static/logo.png);background-image:url(@/static/logo.png);/* 相对路径 */background-image:url(../../static/logo.png); Tips 引入字体图标请参考,字体图标 @开头的绝对路径以及相对路径会经过base64转换规则校验 ...
background: url(@/static/submit.png) ; background-size: cover; 2. uniapp自定义导航栏 <view class="navBarBox"> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <view class="navBar"> <uni-icons type="closeempty" size="22" style="z-index: 99;...
.test2{background-image:url('~@/static/logo.png');} 1. 2. 3. 字体图标 uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点: 支持base64 格式字体图标。 支持网络路径字体图标。 网络路径必须加协议头 https。 从http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
:style="'background-image:url('+ item.image + ');background-size: cover;border-radius: 15rpx;'"> </view> <view class="swiper-item-text"> <view class="tn-text-bold tn-color-white" style="font-size: 50rpx;">{{item.first_title}}</view> ...
设置整个页面的样式可以使用 代码语言:javascript 复制 page{background-color:skyblue;} 图片加载 本地背景图片的引用路径推荐使用以~@开头的绝对路径。 代码语言:javascript 复制 .bg{background-image:url('~@/static/logo.png');} 本文参与,分享自作者个人站点/博客。
/* 绝对路径 */ @import url('/common/uni.css'); @import url('@/common/uni.css'); /* 相对路径 */ @import url('../../common/uni.css'); css 文件或 style 标签内引用的图片路径,可以使用相对路径也可以使用绝对路径,形式如下: /* 绝对路径 */ background-image: url(/static/logo.png)...