微信小程序的background在手机不显示

最新推荐文章于 2024-07-22 18:22:47 发布

wyh_www

最新推荐文章于 2024-07-22 18:22:47 发布

阅读量1.7k

点赞数

分类专栏：单个项目代码文章标签：小程序

本文链接：https://blog.csdn.net/WYH1205/article/details/97792659

版权

微信小程序的背景图片在开发者工具显示正常，但在手机端无法显示。问题在于本地图片在手机上不可用，建议使用服务器图片或Base64编码。微信小程序不支持`background-images`，解决方案包括直接在标签内设置样式、通过服务器地址引用背景图或使用`image`标签。

摘要由CSDN通过智能技术生成

微信小程序的背景图片在微信开发者工具中正常显示，但是在手机端不显示图片。
设置图片全屏样式

style="background:url('https://api.plus.123rf.com.cn/as/46406114.jpg');background-size:100% 100%;"

.container{
  width:100vw;
  height:100vh
}

在手机端不显示的原因：
background本地图片不能再手机上显示，可以引入服务器上的图片，或者使用图片的base64码，但是如果图片太大，建议使用服务器地址。

微信小程序不支持background-images属性，有以下几种方法：
1.直接在标签里加上style样式，加上背景图：

<view style="background:url('../../img/p.png')"></view>

2.如果想使用外部样式表引入的话，直接使用background会报渲染层错误，可以将图片上传到服务器，然后在使用background

<view class="container" style="background:url('https://api.plus.123rf.com.cn/as/46406114.jpg');background-size:100% 100%;">

3.直接使用images标签（注：图片地址使用本地图片地址会报错，可以使用服务器地址）

<view>
  <

关注