- 微信小程序中的 image 标签跟
html中的img标签还是有些差别的。 - image 标签有
src、mode等属性基本够用 - 但是今天在用的时候发现设置
src之后，image 在小程序中是默认有宽高的，也就是固定的，去掉宽高之后，也不会像html中的img标签一样图片内容会撑开标签，这里就需要自己来根据图片的大小进行手动自适应图片宽高了。 - 使用
bindload绑定函数动态自适应，我们可以获取到原图的宽度和高度，计算他们的宽高比率，然后设置一个宽度大小（rpx），最后通过style动态设置 image 的宽高。 - 代码如下:
- .wxml
<image src="./temp.png" style="{{imgStyle}}" bindload="imageLoadSuccess"></image>
- .js
- 微信小程序 - 设备信息与版本更新 这个文章中有动态
pixelRatio的计算获取。
// 设备像素比可以放到 app 中作为全局属性使用 const app = getApp() Page({ data: { // 默认图片没有宽高(你可以默认有宽高) imgStyle: 'width: 0rpx; height: 0rpx;' // 设备像素比，如果不知道获取像素比的可以看看上面那篇文章 pixelRatio: 2 }, // 图片加载完成回调 imageLoadSuccess (e) { // 获取图片信息 const imgDetail = e.detail // 手动设置图片样式宽高 this.setData({ // 图片原始宽高度 * pixelRatio imgStyle: `width: ${imgDetail.width * this.data.pixelRatio}rpx; height: ${imgDetail.height * this.data.pixelRatio}rpx;` }) } })
- 效果比较
- 上面动态设置宽高之后效果：
- 原始效果：
<image src="./temp.png"></image
- 上面动态设置宽高之后效果，同样还可以配合
mode进行使用
- 下面这个图宽高都是有最大范围，当超过最大范围值需要显示图片中间部分，默认是填充撑满的，就需要
image的mode配合：
<image style="{{imgStyle}}" mode="aspectFill" bindload="imageLoadSuccess" src="./temp.png"></image>
