• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序之如何设置图片以及image组件的属性

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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种是裁剪模式。

   

   

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序公共组件的引用与控制发布时间:2022-07-18
下一篇:
微信小程序入门(六) - Gaidy发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap