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

然后就去远行吧2025-01-06 11:20

在编写小程序的样式文件时，可以使用 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 中进行下载（图片源自尚硅谷，非个人所有，无意冒犯）；

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