欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > IT业 > 小程序组件 —— 30 组件 - 背景图片的使用

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

2025/5/14 21:43:45 来源:https://blog.csdn.net/qq_37388085/article/details/144932414  浏览:    关键词:小程序组件 —— 30 组件 - 背景图片的使用

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

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

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

<view class="bg-image"></view>

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

.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 中进行下载(图片源自尚硅谷,非个人所有,无意冒犯);

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词