微信小程序使用image组件显示图片的方法【附源码下载】


Posted in Javascript onDecember 08, 2017

本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考,具体如下:

1、效果展示

微信小程序使用image组件显示图片的方法【附源码下载】

2、关键代码

① index.wxml

<image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image>

② index.js

Page({
 data:{
 // text:"这是一个页面"
 imageSrc:'../../pages/image/img.jpg'
 }
})

3、源代码点击此处本站下载

关于image组件的详细说明还可参考官网https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
完善的jquery处理机制
Feb 21 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
微信小程序实现下载进度条的方法
Dec 08 #Javascript
js断点调试经验分享
Dec 08 #Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 #Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 #Javascript
javaScript字符串工具类StringUtils详解
Dec 08 #Javascript
javaScript日期工具类DateUtils详解
Dec 08 #Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 #Javascript
You might like
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
javascript计时器详解
2015/02/28 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python做文本按行去重的实现方法
2016/10/19 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
django 自定义过滤器的实现
2019/02/26 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
妇产医师自荐信
2014/01/29 职场文书
团拜会策划方案
2014/06/07 职场文书
停电放假通知
2015/04/14 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server