uni-app 3.4.14升级后 @load拿到的图片宽高不正常
uni-app 3.4.14升级后 @load拿到的图片宽高不正常
操作步骤：
<template>
<image :class="name" :src="getSrc" [@load](/user/load)="picloaded" :style="'width:'+style.width+'rpx;height:'+style.height+'rpx;opacity:'+style.opcity"></image>
</template> <script>
import envConfig from "../config/index";
import pics from "../config/pics.js";
export default {
data() {
return {
style:{
width:"",
height:"",
opcity:0,
}
};
},
props: {
name: {
type: String,
},
},
computed: {
getSrc() {
var url=envConfig.cdn + "images/" + this.name.replace(/_/g, "/") + ".png";;
return url;
},
},
created() {},
mounted() {
// console.log(envConfig.cdn);
},
methods: {
picloaded:function(e){
// console.log(e);
this.style.width=e.detail.width;
this.style.height=e.detail.height;
this.style.opcity=1;
}
},
};
</script> <style></style> 预期结果：
<p>我自己封装了一个图片组件，当图片加载后自动给他高宽。之前是正常的</p>实际结果：
<p>更新后，[@load](/user/load)拿到的图片高宽尺寸是错的。</p>bug描述：
<p>Hbuilder升级到最新版本3.4.14后，给<image>组件添加stlyes的属性都不生效了。只能回滚到上一版，希望修复</p>相关链接：
| 信息类别 | 内容 |
|---|---|
| 开发环境 | HBuilder |
| 版本号 | 3.4.14 |
| 项目创建方式 | 未提及 |
9 回复
在 uni-app 升级到 3.4.14 后，如果你发现 @load 事件中获取的图片宽高不正常，可能是由于以下原因导致的：
1. 图片加载时机问题
- 在
@load事件触发时，图片可能还没有完全加载完成，导致获取的宽高不准确。 - 可以尝试在
@load事件中加入setTimeout延迟获取宽高，确保图片已经完全加载。
<template>
<image :src="imageSrc" @load="onImageLoad" />
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg'
};
},
methods: {
onImageLoad(event) {
setTimeout(() => {
const { width, height } = event.detail;
console.log('Image width:', width);
console.log('Image height:', height);
}, 100); // 延迟 100ms 获取宽高
}
}
};
</script>2. 图片缩放问题
- 如果图片在显示时被缩放（例如通过 CSS 设置
width或height），@load事件中获取的宽高可能是原始图片的宽高，而不是实际显示的宽高。 - 可以通过
uni.createSelectorQuery()获取实际显示的宽高。
<template>
<image :src="imageSrc" @load="onImageLoad" id="myImage" />
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg'
};
},
methods: {
onImageLoad() {
uni.createSelectorQuery().select('#myImage').boundingClientRect(rect => {
console.log('Image display width:', rect.width);
console.log('Image display height:', rect.height);
}).exec();
}
}
};
</script>3. 图片缓存问题
- 如果图片已经被缓存，
@load事件可能会立即触发，导致获取的宽高不准确。 - 可以尝试在
@load事件中加入setTimeout延迟获取宽高，或者强制重新加载图片。
<template>
<image :src="imageSrc + '?t=' + timestamp" @load="onImageLoad" />
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg',
timestamp: Date.now()
};
},
methods: {
onImageLoad(event) {
setTimeout(() => {
const { width, height } = event.detail;
console.log('Image width:', width);
console.log('Image height:', height);
}, 100); // 延迟 100ms 获取宽高
}
}
};
</script>4. uni-app 版本问题
- 如果以上方法都无法解决问题，可能是
uni-app版本本身存在 Bug。可以尝试回退到之前的稳定版本，或者关注官方更新，等待修复。
5. 检查图片资源
- 确保图片资源本身没有问题，例如图片是否损坏、是否能够正常加载等。
6. 使用 uni.getImageInfo
- 如果
@load事件无法获取正确的宽高，可以尝试使用uni.getImageInfo获取图片信息。
<template>
<image :src="imageSrc" @load="onImageLoad" />
</template>
<script>
export default {
data() {
return {
imageSrc: 'https://example.com/image.jpg'
};
},
methods: {
onImageLoad() {
uni.getImageInfo({
src: this.imageSrc,
success: (res) => {
console.log('Image width:', res.width);
console.log('Image height:', res.height);
}
});
}
}
};
</script>