微信小程序设置背景图片不显示问题解决方法

最近开发小程序的过程中遇到了这样一个小问题，在wxss文件中通过background设置背景图片，要实现背景图片上显示文字的效果，发现背景图片不显示，设置背景图片的代码如下：

.test {width:100rpx;height:30rpx;background:url('../../img/image.png') no-repeat;background-size: 100% 100%;
}

经查询，发现微信小程序中，将网络图片或base64图片设置为背景图片可正常显示，将本地图片设置为背景图片则不能显示，解决方法有三种，个人采用的是第三种方法。

本地图片转换为base64格式

在线转换地址传送门

.test {background:url(data:image/png;base64,VCdweSsd98iVBORw0KGgoAAAANSUhEUgAAACgAAAAgCAYAAABgrToAAAAAAXNSR0IArs4c6QAAAHlJREFUWAnt2LEJwDAMRFE5c2ShLOKhsp69h3ISeAI1CnyBiJvA8dwcHu7+mNmrvbWdZivMHAq4dOgW7kDt65y6fiPg1AZnt8kr7haKPAgggAACfxOIskCbKdwabaaAlw0rmhaDAAIIIIBAQYA2U8CLX2kzFcB8m) no-repeat;width: 100rpx;height: 30rpx;background-size: 100% 100%;
}

使用行内样式
```
<view class="test" style="background:url('../../img/image.png')"><text>文字内容</text>
</view>
```
行内样式经验证，存在模拟器正常显示，真机无法正常显示的问题

image替换背景图片，定位实现背景图片效果

<view class="test"><image src="../../img/image.png"></image><text>文字内容</text>
</view>

.test{width:100rpx;height:30rpx;position:relative;
}
.test image{width:100%;height:100%;
}
.test text{width:100%;height:100%;line-height:100%;text-align:center;position: absolute;top:0;left:0;font-family:"PingFangSC-Semibold";color:#fff;font-size:18rpx;
}

最终图片放在另外一个H5项目中，可通过网络地址访问，以网络图片的形式访问，解决了背景图片显示的问题。

微信小程序设置背景图片不显示问题解决方法相关推荐

微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片微信小程序中不能使用本地图片 background-image:url ...
微信小程序——设置背景图片
项目希望实现如上效果, 使用vant的picker组件而源码是这样的: <viewclass="van-picker__cancel"hover-class="v ...
小程序设置背景图片的两种方法总结
背景图片我们会时常遇到设置背景图片,这里简单地总结下两种方法: 1.background-image background-image,顾名思义是背景图片的意思,设置父亲元素,然后通过backgro ...
微信小程序设置背景图片在手机端不显示的问题
<view class="connect" style="background-image: url(/static/wifi_bgc.png);backgroun ...
微信小程序设置本地图片的背景，开发工具可以，手机端不显示
let base64 = wx.getFileSystemManager().readFileSync('/images/videoCover.jpg', 'base64') this.setData ...
微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置源代码//index.wxss page{ background-size:100% 100%; background-ima ...
微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
微信小程序设置本地图片为背景图
微信小程序通过wxss进行设置背景图报错经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法 ...
微信小程序大型背景图片设置
微信小程序背景图片设置微信小程序通过background-image设置背景:只支持网络图片和base64图片,不支持本地图片线上图片设置步骤如下在网站https://image.kieng.c ...

微信小程序设置背景图片不显示问题解决方法

微信小程序设置背景图片不显示问题解决方法相关推荐

最新文章

热门文章