四种方法解决微信小程序设置背景图片,哪种最好?
做了许久的小程序,现在选择用博客记录我遇到的问题以及问题的解决办法,也分享给大家一些自己的心得,记录如下:
问题描述
在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题。
代码:
.bg{width: 750rpx;height: 540rpx;background-image: url(../../images/head_bg.png);
}
在页面使用这个样式的时候小程序会报错。
解决方案
小程序背景图片无法直接使用本地图片。有4种解决方案:
- 使用image组件,在布局下面盖上一层图片。缺点:布局结构可读性不高。
- 将图片通过在线转化网站,转化成base64格式。缺点:base64内容太长了,影响样式代码阅读。
- 直接通过行内样式解决。缺点:代码看上去不够优雅。(最简单)
- 直接使用网络图片。缺点:需要放到服务器上。(最灵活)
建议使用第4种方法解决,虽然首次操作会有点麻烦,但是这样可以增加灵活度后续可以不发版本直接替换远程图片。
如果是公司都有服务器放一下就好了。但是我们是独立开发,服务器怎么办解决?别忘了,其实我们可以将图片放在云开发的云存储里面会自动生成在线图片链接。
放在云存储上
- 进入云开发控制台
- 进入云存储空间
- 拖拽图片到云存储空间,不勾选任何配置,点击确定即可上传成功了
- 点击文件名称,复制文件地址
CSS代码:
.head-bg{width: 750rpx;height: 540rpx;background-image: url('https://xxxxxxxxxx.tcb.qcloud.la/head_bg.png');background-size: 100% 100%;
}
WXML代码
<view><!-- 头部 --><view class="head-bg" ><!-- 省略无关代码 --></view>
</view>
行内样式
当然如果实际业务需求没有替换图片的需求也可以使用第3个方案,这个是最省事的方案。代码如下:
<view><!-- 头部 --><view style="background-image: url(../../../../images/head_bg.png);background-size: 100% 100%;" ><!-- 省略无关代码 --> </view>
</view>
Base64编码格式
第2个方案,Base64编码格式,先将图片转化成base64编码。点击传送到base64图片在线转换工具
background-image:url('base64编码')
用内容覆盖图片
第1个方案,用内容覆盖图片
wxml代码
<view class="container"><image src='../image/head_bg.png'></image><view class='content'>我是内容</view>
</view>
wxss代码
.container{width: 100%;height: 600rpx;margin: 0;padding: 0;position: relative;
}
image{position: absolute;width: 100%;height: 600rpx;
}
.content{position: absolute;z-index: 1;
}
四种方法解决微信小程序设置背景图片,哪种最好?相关推荐
- 微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片 微信小程序中不能使用本地图片 background-image:url ...
- 微信小程序——设置背景图片
项目希望实现如上效果, 使用vant的picker组件 而源码是这样的: <viewclass="van-picker__cancel"hover-class="v ...
- 微信小程序设置背景图片不显示问题解决方法
最近开发小程序的过程中遇到了这样一个小问题,在wxss文件中通过background设置背景图片,要实现背景图片上显示文字的效果,发现背景图片不显示,设置背景图片的代码如下: .test {width ...
- 微信小程序设置背景图片在手机端不显示的问题
<view class="connect" style="background-image: url(/static/wifi_bgc.png);backgroun ...
- 微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式 原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
- 详解 - 解决微信小程序分享功能图片比例问题 - 全局分享
前言: 我在我的博客小程序使用微信小程序分享功能 图片不符合5:4问题 ,对其原理 扫描下面二维码,可以体验哦 准备 在需要自定义分享的页面 设置canvas 组件 目录 准备 详解思路 定义总函数 ...
- 微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置 源代码//index.wxss page{ background-size:100% 100%; background-ima ...
- 微信小程序设置本地图片的背景,开发工具可以,手机端不显示
let base64 = wx.getFileSystemManager().readFileSync('/images/videoCover.jpg', 'base64') this.setData ...
- 小程序设置背景图片的两种方法总结
背景图片 我们会时常遇到设置背景图片,这里简单地总结下两种方法: 1.background-image background-image,顾名思义是背景图片的意思,设置父亲元素,然后通过backgro ...
- 微信小程序设置 本地图片为背景图
微信小程序 通过wxss进行设置 背景图报错 经查询,发现微信小程序中,将网络图片或base64图片设置为背景图片可正常显示,将本地图片设置为背景图片则不能显示,解决方法有三种,个人采用的是第三种方法 ...
最新文章
- 跟踪workflow instance 状态
- CVPR2020 | PV-RCNN: 3D目标检测
- linux message日志只有4k,命令长期运行 常用技巧 Linux 服务器 · 404k的前后端日志...
- 直播APP开发注意事项汇总
- python画圆填色_python turtle我想用五种颜色画五个圆,并且用画圆周的颜色填充,老是出问题,怎么回事,怎么修改?:python教程同心圆...
- Spring框架设计
- [转]重新分配内置存储空间 android手机
- android browser 书签 路径,Android Browser学习七 书签历史模块: 书签UI的实现(2)
- 重邮计算机导师评价,李章勇_重庆邮电大学研究生导师信息
- P2Psim分析笔记(5)-EventGenerator and Observer
- win10的11对战平台突然无法启动魔兽
- 【逆向工具】使用x64dbg+spy去除WinRAR5.40(64位)广告弹框
- 深入理解JVM(重要)
- 57.should merge Js
- .netcore3 下Signalr 关于Joson序列化后对象属性变小写的问题
- 什么是 DNS,有什么作用?为什么需要更换公共DNS服务器?
- 如何从多个Excel文件多个Sheet中搜索某一内容,多个excel文件批量查找的绿色工具
- 成长的旅途,未知的邂逅
- 【条形码识别】基于计算机视觉实现二维条形码识别含Matlab源码
- itunes一直显示正在验证iphone恢复_新iPhone到手了,怎样将数据资料迁移过去?