微信小程序图片使用示例

简介: 微信小程序图片使用示例

1:加载本地文件夹图片

1. <image  src="/image/pig.jpg" mode="aspectFill">
2. </image>

2:加载服务器图片

wxml:

    <image  src="{{imageUrl}}" mode="aspectFill">  
    </image>  

js:

Page({
  data: {
    imageUrl: "http://www.intmote.com/timg.jpg",
  },

或者直接在wxml写代码:

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

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

方法一:

使用背景图片的时候用网络图片,就是用外链的形式,比如你将这张图片放到你的服务器,如:

方法二:

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

相关文章
|
小程序 JavaScript 数据库
微信小程序系列——上传下载图片以及图片的展示
微信小程序系列——上传下载图片以及图片的展示
|
小程序
[微信小程序]微信小程序text显示两行
直接上代码 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webki...
3548 0
|
4月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
145 4
|
4月前
|
小程序
微信小程序上传图片的三种方法
微信小程序上传图片的三种方法
|
5月前
|
小程序 容器
微信小程序echart图片不显示 问题解决
微信小程序echart图片不显示 问题解决
45 0
|
5月前
|
JSON 小程序 前端开发
简单描述下微信小程序的相关文件以及类型?
简单描述下微信小程序的相关文件以及类型?
109 1
|
10月前
|
XML 小程序 前端开发
微信小程序(二十六)微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的)。 两种方法,各有各的优缺点。
182 0
|
11月前
|
小程序 JavaScript
微信小程序图片使用示例
微信小程序图片使用示例
325 0
|
小程序 Windows
微信小程序系列——自定义标题
微信小程序系列——自定义标题
|
小程序 JavaScript API
微信小程序-image组件-选择相册资源案例
在我们企业开发当中经常有个人中心等相关需求,这些需求当中有一个功能点就是用户头像信息,这种信息用户可以选择自己手机当中的资源进行上传并保存设置。本章就是来介绍下这种功能在微信小程序当中该如何进行实现。
153 0