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组件的属性的更多相关文章

  1. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  2. 小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshiton ...

  3. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. 小程序中input设置宽度后宽度还有空间,但是placeholder被遮挡问题

    最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <inp ...

  6. 微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签

    微信小程序:本地资源图片无法通过 WXSS 获取,可以使用网络图片或者 base64或者使用image标签 一.问题 报错信息: VM696:2 pages/user/user.wxss 中的本地资源 ...

  7. 微信小程序-显示外链图片 bug

    微信小程序-显示外链图片 bug 显示外链图片 bug 403 bug 禁止外链,未授权 https://httpstatuses.com/403 image component 图片.支持 JPG. ...

  8. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  9. 微信小程序把玩(二十七)audio组件

    原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...

随机推荐

  1. Codeforces711C 【DP】

    题意: 有n个点,m种颜色,你要给n个点上没有颜色的点染色.每个点i对应染的颜色j有一个颜料消耗,p[i][j]是点i染成j颜色的花费,你必须保证有k段颜色的点,输出最少花费多少颜料. 还有一个就是本 ...

  2. Hibernate中的Query对象查询所有记录

    映射文件,核心文件,实体类,工具类的内容都不变直接看测试方法中的代码: package com.yinfu.test; import java.util.List; import org.hibern ...

  3. C#中,用HashTable,DataTable等复制和克隆浅谈

    如有雷同,不胜荣欣,若转载,请注明 在C#中,用HashTable,DataTable等复制和克隆浅谈,下面直接看例子 HashTable ht = null; ht = new HashTable( ...

  4. 「软件」仿站小工具v9.0

    仿站小工具是通过网址下载静态网页的工具.从输入的网址下载html代码,提取出JS.Css.Image.Picture.Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址, ...

  5. Jquery | 基础 | 慕课网 | 基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  6. python计算代码运行时间的装饰器

    import time def cal_time(func): def wrapper(*args, **kwargs): t1 = time.time() result = func(*args, ...

  7. Educational Codeforces Round 24 A

    There are n students who have taken part in an olympiad. Now it's time to award the students. Some o ...

  8. 2019/05/13 JAVA虚拟机堆内存调优

    -Xms4000m 堆内存初始值 * -Xmx4000m 堆内存最大值 * -XX:+PrintGCDetails 打印GC信息 * -XX:+UseSerialGC 使用串行GC * -XX:+Pr ...

  9. AJPFX:求两个城市之间的距离

    键盘录入多个城市: 城市1,城市2,城市3  以 ### 结束输出然后再键盘录入各个城市之间的距离:  格式如下:0,12,4512,0,2245,22,0### 然后按照输入的两个城市,求得两个城市 ...

  10. 【学习笔记】深入理解js原型和闭包(2)——函数和对象的关系

    上文(深入理解jS原型和闭包(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; console.log ...