526互联

微信小程序设置 本地图片为背景图 报错

发布时间 2023-06-12 14:38:43作者: depressiom

微信小程序 通过wxss进行设置 背景图报错

背景

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

1. 本地图片转换为base64格式

在线转格式

2.使用行内样式

 <view class="flex_view" bindtap="handleUpstream" style="background:url(../../../images/upstream_bg2.png);">

行内样式经验证，存在模拟器正常显示，真机无法正常显示的问题

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

 <view class="flex_view" bindtap="handleUpstream">
     <image src="../../../images/upstream_bg0.png"  class="flex_bg"/>

image替换背景图

模拟器，真机都可以显示

4. 可通过网络地址访问，以网络图片的形式访问，解决了背景图片显示的问题