微信小程序图片使用示例

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

1:加载本地文件夹图片

 

  1. <image src="/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后前端妹子,爱编程,爱运营,爱折腾。  坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

上一篇 一种轻量级的微信小程序日志监控的方法 下一篇 小程序商城购物车功能开发方法
论坛资讯同步说明,本文同步自论坛:bbs.miaozhizuo.com,如您在论坛注册成为会员用户并且发帖,则默认论坛文章同步协议,协议内容请移步论坛查看!

          在线客服

            点击这里给我发消息

          VIP咨询
         点击这里给我发消息

          咨询热线

   17080039991

      (免费拨打)

          代理招商

   178-9531-8531

[关闭]
随手APP微信

官方微信自助客服

[关闭]