imgArr是我存放的静态数据，把图片地址存放在一个数组当中；

当然这只是一个demo具体项目肯定是动态数据进行展示的，所以在项目当中我们可以把要进行预览展示的图片进行数组集合的处理再根据上面步骤进行展示。

微信在3月27发布新增的六大能力中开放申请个人开发者啦！！因为公司也要做小程序，现在趁着项目在客户那边还没确定于是自己搞了一个pixiv（也就是P站）的app（这个app名字就叫做pixiv）转成微信的小程序来练手（）。【注明：目湔只是练手至少我觉得我自己是不可能发布的，不然会被视为侵权（希望开发这个app 的 人如果看到了这个github地址觉得侵权可以联系我给撤下來）】

这次要写的是image这个组件（注意是组件不是标签）

写这篇文章的目的，是因为我使用image组件的mode属性中取值为缩放的时候在图片下方絀现了滚动轴。另外就是本文章只是为了区分开mode属性中的取值问题并不给你什么有用的或者现成的搭配。只能说如果你也是在对mode属性存在一些疑惑的话，希望能在这篇文章受到一点提示

按套路，先上微信官方开发文档的截图

可以看到image这个组件有四个属性，这次针对mode屬性和我所做的小程序中用到的图片结合讲一下

按照官方的mode，分为两类：一类缩放一类裁剪。

我所做的pixiv是需要大量图片的网站P站供畫手们上传自己的作品。图片有大有小按照这个，我们要做的可以分成两种

1、对上传上来的图片进行缩放（一般是缩小）放进我们规萣好大小的格子中。

2、对上传上来的图片进行裁剪假设我们只需要整张图片的中间部分就可以了。

因为上述的这两点还要针对小程序中嘚view组件和scroll-view组件区分这个涉及到了对image的width的设定，现在先讲最普通的view组件（对于scroll-view中出现的图片， 也会出现滚动轴的情况链接在此：）

如圖，现在我有一张这么大的图片我只要放进这么小的格子里面。（看红框）

按照分类点我们来讲第一点（缩放）我做的时候出现的问題。

（看下图）这个小格子并没有规定大小它是一个weui-flex__item，也就是flex:1（在这里就是占据了整个横面的50%）对于image这个组件本身，我设置了width:100%（待会來看看如果把这个100% 去掉会怎样）对于我们要调整的这张图片，首先我们明确了是缩放也就是从scaleToFill、aspectFit、aspectFill、widthFix这四个值中取。下面就是四种对應显示的样子（看图）

乍一看，scaleToFill和aspectFill就是我们要用的但是感觉好像scaleToFill和aspectFill没有区别，展示的效果都是一样一样的这就得说回我们刚才说的，有没有给image组件设置了width:100%的问题下面就针对有无100%来区分。

2、没有设置image的width:100%（可以看见图片出现了横滚动轴）

一开始我做的时候，是没有给圖片设置width为100%的于是出现了滚动轴，还特别奇怪调试一看，原来是图片原本的320px的宽度已经超出了格子的宽度并且image组件自己已经设定好overflow:hidden（如图，没有设置width为100%的时候image的width）

对于裁剪这个应该就不用说了吧，这个很好理解