小程序之如何设置图片以及image组件的属性
1. 设置图片,小程序支持两种引用图片方法,一种是本地引用,一种是网络资源引用。
但是引用本地图片的的时候不能用wxml样式去引用本地的图片,不会报错,也没效果。就是在wxss页面中不能引用本地的图片。这个时候就要用image组件了。
2. 加载本地的图片
<image class="user" src='../../images/login/icon.png' style='width:120px;height:120px'></image>
src是图片的相对路径,一般图片放在images这个文件夹中。这样就可以显示了。
相反如果你是在wxss里这样写是没有效果的。
看下效果:
加载网络资源的图片:
直接在src这个属性附上地址,它会自动加载。
<image class="user" src="{{imageUrl}}" mode="aspectFill"></image>
这个imageUrl是在js文件中数据
data:{
imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg"
},
3. image的属性
需要注意image组件默认宽度300px、高度225px,然后主要是mode这个属性。mode有12种模式,其中3种是缩放模式,9种是裁剪模式。
小程序之如何设置图片以及image组件的属性的更多相关文章
- 【微信小程序】动态设置图片大小
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src 图片资源地址2.mode 图片裁剪.缩放的模式3.binderror ...
- 小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshiton ...
- 微信小程序通过background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 小程序中input设置宽度后宽度还有空间,但是placeholder被遮挡问题
最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <inp ...
- 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签
微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...
- 微信小程序-显示外链图片 bug
微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
- 微信小程序把玩(二十七)audio组件
原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...
随机推荐
- 洛谷 - P2055 - 假期的宿舍 - 最大流
https://www.luogu.org/problemnew/show/P2055 这是一个错误的示范. 一开始觉得就找一条路从外校同学连到本校同学然后最终从周末回家的同学流出,每个人睡后一个人的 ...
- Codeforces - 9D - How many trees? - 简单dp - 组合数学
https://codeforces.com/problemset/problem/9/D 一开始居然还想直接找公式的,想了想还是放弃了.原来这种结构是要动态规划. 状态是知道怎么设了,$t_{nh} ...
- HDU6069:Counting Divisors(因子数统计|区间筛)
题意 计算\(\sum_{i=l}^kd(i^k)(d_i代表i的因子数)\) 分析 比赛搞了3个小时都没搞出来,有两个思维上的trick 1.要先遍历素数,再遍历[L,R],而不是枚举每个数,然后对 ...
- Codeforces510B【dfs】
判断一个图里是否有一个自环: 50*50 标记起点,然后暴搜? #include <bits/stdc++.h> #include<algorithm> using names ...
- 了解Web Uploader
1.简介WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流 ...
- python __builtins__ type类 (69)
69.'type', 返回对象类型 class type(object) | type(object_or_name, bases, dict) | type(object) -> the ob ...
- java笔记1:准备工作:java历史、Java环境、java编辑器、cmd常用命令
java的历史 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称. 由James Gosling和同事们共同研发,并在1995年正 ...
- BestCoder Round #54 (div.2) 1003 Geometric Progression
题目传送门 题意:判断是否是等比数列 分析:高精度 + 条件:a[i] * a[i+2] == a[i+1] * a[i+1].特殊情况:0 0 0 0 0是Yes的,1 2 0 9 2是No的 代码 ...
- (转)深入理解Java对象的创建过程
参考来源:http://blog.csdn.net/justloveyou_/article/details/72466416 摘要: 在Java中,一个对象在可以被使用之前必须要被正确地初始化,这一 ...
- 转 做了两款数据库监控工具(mysql and nosql),打算在近期开源
http://www.cnblogs.com/leefreeman/p/7297549.html 监控指标:https://www.linuxidc.com/Linux/2015-08/122009. ...