前端小程序cover-image和image的区别

我在做微信小程序项目遇到的坑，cover-image和image都是用来显示图片的，但是我们要慎用cover-image，但我们写的页面是有d出层的，你使用这种标签写的，图片不会显示出来，但换成image就可以，所以，我们要慎用州链cover-image。

在小程序中image标签跟view标签上下会有空隙，我们可以在image标签中设置vertical-align:top/bottom/text-top/text-bottom，原因：图片文唯迹猜字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级指型底边有必定间距

wxml部分：

<image src="../images/xwbanner.png" mode="widthFix" bindload="imageLoad" style="width:{{ images[index].width }}rpxheight:{{ images[index].height }}rpx" ></image>

wxss部分：烂逗碰

image{

width：100%；

}

js部分：

Page({

data: {

images:{}

},

imageLoad: function(e){

var $width=e.detail.width,//获取饥谈图片真实宽度

$height=e.detail.height,

ratio=$width/$height //图片的真实宽高比例

var viewWidth=718, //设置图片显示宽度，左右留有指孝16rpx边距

viewHeight=718/ratio //计算的高度值

var image=this.data.images

//将图片的datadata-index作为image对象的key,然后存储图片的宽高值

image[e.target.dataset.index]={

width:viewWidth,

height:viewHeight

}

this.setData({

images:image

})

},

})

微信文件夹下image、image2是微信表情图片的缓存文件夹，emoji是表情，1a，32，8c为对方人名。

微信聊天记录中的则迹表情图片、微信下载的表情包、收藏的表情图片都会自动存储到这2个文件夹内。

这些文件可以删除的，打不开是因为这些图片经过了加密处理，不能直接打开的，以防您手机被盗后存储卡被单独拿出导致您的个人信息被泄露。

扩展资料：

image组件默认宽度300px、高度225px 注2：image组件中二维码空盯凳/小程斗旅序码图片不支持长按识别，仅在wx.previewImage中支持长按识别。

image图片的属性和类型说明：

src  String  图片资源地址，支持云文件ID（2.2.3起）

mode  String  'scaleToFill'：图片裁剪、缩放的模式

lazy-load  Boolean  false：图片懒加载。只针对page与scroll-view下的image有效  1.5.0

binderror  HandleEvent：当错误发生时，发布到AppService的事件名，事件对象event.detail={errMsg:'somethingwrong'}

bindload  HandleEvent：当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:'图片高度px',width:'图片宽度px'}

---