微信小程序 --- 图片自适应、本地图片的使用

1、关于图片自适应

image标签中添加mode属性：

默认值：scaleToFill ---- 不保持纵横比例缩放图片，使图片的宽高完全拉伸至填满image标签

aspectFit ---- 保持纵横比例缩放图片，使图片的长边能够完全显示出来，也就说图片可以完整的显示出来

aspectFill ----- 保持纵横比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取

top ---- 不缩放图片，只显示图片的顶部区域

bottom ---- 不缩放图片，只显示图片的底部区域

center ---- 不缩放图片，只显示图片的中间区域

left ---- 不缩放图片,只显示图片的左边区域

right ----- 不缩放图片，只显示图片的右边区域

top left ---- 不缩放图片,只显示图片的左上边区域

top right ---- 不缩放图片,只显示图片的右上边区域

bottom left ---- 不缩放图片,只显示图片的左下边区域

bottom right ---- 不缩放图片,只显示图片的右下边区域

2、关于图片引用

在wxss页面中不能引用本地的图片

解决方案：

1、要是希望在wxss文件中使用背景图，我们可以使用网络图片，或者base64位的图片

2、通常情况下在CSS文件中我们是没有办法拿到后台返回的域名，然后我们又希望可以使用一些本地的小图标之类的，我们可以在wxml中使用背景图，直接在view的style中写样式

　例如：

3、在页面中直接使用image标签，然后使用绝对定位

转载于:https://www.cnblogs.com/zhanghuiyun/p/6879240.html

微信小程序 --- 图片自适应、本地图片的使用相关推荐

微信小程序如何获取本地图片的网络地址
~~ 微信小程序如何获取本地图片的网络地址 ~~ 要想获取本地图片网络地址,首先得要上传到网络一般的网络上传比如QQ空间上传后右键图片获取其网络地址即可,但是小程序端可能会报错,大家可以试一试还 ...
微信小程序——如何解决本地图片不显示的问题
解决微信小程序本地图片不显示的问题这篇记录的是小涂踩的小程序的一个坑:本地图片真机显示不出来! 问题发现开发小程序过程中,模拟器上显示一些本地的图标照片(.jpg \ .png -)模拟器上可以清 ...
微信小程序加载本地图片方法
目录结构如下,只要图片按正确的方式放入小程序的开发工具的项目中,即可在wxml文件中用内联样式或者image标签都可以引用本地的图片. 步骤一:微信开发工具打开项目步骤二:新建个文件夹(放项目的一 ...
微信小程序不能使用本地图片当背景图片的解决方法
本来直接用的本地图片,但结果真机调试的时候无法显示,上网查了之后知道小程序图片只能加载网络上的(直接写链接),或者是base64转码后的 style="background-image:ur ...
【微信小程序】将base64图片保存至本地
需求描述微信小程序中,下载一个报告文件,直接可获取到的是报告图片的base64格式. 参考文章 1.微信小程序实现图片下载功能 2.微信小程序把base64的图片保存到手机相册代码实现 1.wxm ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
微信小程序实现PDF转图片（java spring实现）
微信小程序实现PDF转图片前后端(两种方式) 1.前端传PDF的url地址至后端 1.1前端 1.2后端 2.前端传PDF文件至后端 2.1前端 2.2后端 1.前端传PDF的url地址至后端 1.1 ...
小程序源码：强大的多功能图片处理器微信小程序源码下载图片画框合成-多玩法安装简单
大家好这是以开以图片为主题的一款小程序里面拥有了多种的图片处理功能,也算是比较强大的一款另外小编最喜欢的就是里面的图片画框合成这个功能该功能里面有N种画框模板,然后画框的尺寸根据您的图片自适应处 ...

微信小程序 --- 图片自适应、本地图片的使用

微信小程序 --- 图片自适应、本地图片的使用相关推荐

最新文章

热门文章