小程序组件 —— 30 组件 - 背景图片的使用

在编写小程序的样式文件时,可以使用 background-image 属性来设置元素的背景图像;但是这个属性在微信小程序中使用时存在坑;

注意事项:微信小程序中的 background-iamge 不支持本地路径!需要使用网络图片,或者 base64,或者使用 image 组件;

打开微信开发者工具,在 index.wxml 文件最底部添加一行代码:

typescript 复制代码
<view class="bg-image"></view>

在 index.scss 中添加样式进行测试:

css 复制代码
.bg-image{
  height: 400rpx;
  // 小程序背景图的地址不能写本地路径,写本地路径的图片无法展示
  background-image: url(../../assets/bgimage.png);
  // 可以使用网络图片代替本地图片
  background-image: url(http://8.131.91.46:6677/bgimage.png);
  // 也可以将本地图片转为 base64 进行展示,由于 base64 数据太长,这里不进行演示
  background-image: url(data:image/png;base64,iVB*****);
}

对应的图片,可以从 gitCode 中进行下载(图片源自尚硅谷,非个人所有,无意冒犯);

参考视频:尚硅谷微信小程序开发教程

相关推荐
攻城狮-申12 小时前
小程序uview actionSheet 内容过多高度设置
小程序·uview·hb
ybb_ymm13 小时前
从需求开始至架构设计的适用于商家及小吃摊的点餐小程序
小程序·apache
2501_9151063213 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074713 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
阿登林14 小时前
如何利用扣子生成小程序并进行发布指南
小程序·扣子
流***陌1 天前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
Tencent_TCB1 天前
云开发CloudBase AI+实战:快速搭建AI小程序全流程指南
人工智能·ai·小程序·ai编程·云开发
说私域1 天前
“开源AI大模型AI智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
一匹电信狗1 天前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序