微信小程序图片使用示例

微信小程序图片开发一般包括加载本地图片，加载服务器图片，已经背景图，那么微信小程序下面为大家介绍图片处理的常用的小程序图片使用样式。

1：加载本地文件夹图片

 

1. <image src=https://www.kesion.com/miniprogramschool/image/pig.jpg" mode="aspectFill">

2. </image>

 

 

2:加载服务器图片

wxml:

 

1. <image src="{{imageUrl}}" mode="aspectFill">

2. </image>

js:

 

1. Page({

2. data: {

3. imageUrl: "http://www.intmote.com/timg.jpg",

4.  

5. },

       g  或者直接在wxml写代码：

 

1. <image src="http://www.intmote.com/timg.jpg" mode="aspectFill">

2. </image>

3：给小程序页面加载一张背景图片

方法一：  使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器。

方法二：  将背景图片使用编码base64进行转换，可以在这个网址进行http://tool.css-js.com/base64.html 转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；

90后前端妹子，爱编程，爱运营，爱折腾。  坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。