在wxss
文件中,使用background-image: url();
设置背景图,报错,提示
pages/me/me.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签
小程序中设置区域背景图,对于在wxss
文件中,存在本地资源无法获取的问题。解决方案在错误提示中也给出来了
1、网络图片
使用背景图片的时候,采用网络图片
background-image: url(https://xxx/xxx.pmg);
2、base64
base64编码,在这个网站进行转换,转换之后的得到的字符串放入url中。格式:
background-image: url(转换之后的base64字符串);
多次使用的话,可以设置全局变量,在js文件中进行引用
3、<image/>标签
利用流布局,设置z-index
层级,将<image/>标签置于底层
具体代码如下:
.wxss文件
/* 头部 */
.header-container {
display: flex;
flex-direction: row;
height: 200rpx;
background-color: #fff;
align-items: center;
position: relative;
background-image: url(../../image/me/myinfo_bg.png);
}
.header-bg{
width: 100%;
height: 100%;
}
/* 名称和头像 */
.userContent{
position: absolute;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100%;
}
.header-avatar {
background-color: #fff;
width: 90rpx;
height: 90rpx;
margin: 0 20rpx;
border-radius: 50%;
}
.header-nickname {
color: #fff;
font-size: 30rpx;
}
/* 帐号管理和信息 */
.header-userInfo{
display: flex;
flex-direction: column;
height: 100%;
width: 120rpx;
margin-left: auto;/*靠右*/
}
.wxml 文件
<view class="header-container">
<image class='header-bg' src = '../../image/me/myinfo_bg.png'></image>
<view class='userContent'>
<image bindtap='changePhotoImg' class="header-avatar" src="{{userInfo.headUrl}}" ></image>
<text class="header-nickname">姓名</text>
<view class='header-userInfo'>
<image></image>
<text class='header-centertext'>帐号管理 ></text>
</view>
</view>
</view>
效果图
网友评论