Vue中获取图片高度的两种方法
一.问题描述
在使用Vue2开发移动端页面的时候，需要做一个效果，实现的方案是背景渐变，但是想要实现这个效果就必须进行定位，然后设置z-index让这个元素在其他元素的下面，我的背景高度需要在一个十分恰当的位置，在这个背景上面还有另外一张图片，但是我的图片会随着移动端页面的变化而发生高度的变化，为什么会变化哪？因为我设置了图片的宽度为100%这样就有可能导致，背景的位置在宽屏的情况下和UI差距比较大，所以我需要获取图片的高度，然后在这个高度上增加合适的高度就可以在任何屏幕中自适应，但是无论我在mounted中如何获取，甚至在$nextTick中获取到的图片高度都是0，导致一直无法实现自己想要的效果，以上描述的效果基本如下：
二.问题分析
出现这个问题的点在于，进行背景设置的元素，是定位的，所以脱离了标准流，导致它的高度无法被撑起来，并且也不能撑起来，因为它的高度是一个比较特殊的高度，所以只能进行定位，但是又因为图片的高度变化，导致背景一个固定的值不能满足要求，解决方案是动态获取图片的高度然后相应的去设置背景元素的高度，比较坑的地方就在于直接在mounted和$nextTick中拿不到高度，原因在于图片未加载完成，所以需要在图片完全加载后进行后续的处理。
三.问题解决
解决方案一： 使用JS的方式进行获取图片高度，在图片高度的基础上动态设置背景高度。
methods: {
handleImageLoad(event) {
const height = event.target.offsetHeight;
this.height1 = height + 120;
},
getPicHeight() {
this.height1 = this.$refs.myPictrue.offsetHeight + 120;
},
},
mounted() {
window.addEventListener("resize", () => {
this.getPicHeight();
});
},
beforeDestroy() {
window.removeEventListener("resize", this.getPicHeight);
},
解决这个问题的方法就是使用 @load="handleImageLoad"当图片加载完毕之后就会直接出发这个方法中的逻辑进行处理，然后获取高度来让背景跟随图片高度进行变化。
解决方案二： 手动计算图片比例，使用vw进行动态计算。
.img {
width: 100vw;
height: 40vw;
position: relative;
z-index: 9;
background-color: red;
}
.img-bg {
width: 100vw;
position: absolute;
top: 0;
left: 0;
height: calc(40vw + 120px);
background-color: green;
}
四.问题总结
这个问题其实本质原因还是对不同内容加载完成时机不够清楚，因为在开发过程中有时候确实不太会去考虑拿到图片的高度，但是其实使用vw来解决这个问题其实是更好的，它的缺点在于需要自己去计算宽高比，但是本着不写代码就不会有bug的原则，能够尽量使用纯CSS解决的问题就用纯CSS来解决。
到此这篇关于Vue中获取图片高度的两种方法的文章就介绍到这了,更多相关Vue中获取图片高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue.js数据绑定操作,结合实例形式详细分析了vue.js数据绑定的各种常见操作技巧与相关注意事项,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue element-ui读取pdf文件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了vue项目中图片懒加载时出现的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue3 源码导读(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
Vue使用vue-simple-uploader上传文件夹实现方式
本文介绍使用vue-simple-uploader上传文件夹的流程：前端点击按钮选择文件夹,确认上传并显示进度；后端SpringBoot接收文件夹数据,完成传输与处理2025-09-09
vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
这篇文章介绍了Vue.js通过组件处理Icon图标的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要介绍了vant的picker的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue-cli3生成的Vue项目加载Mxgraph方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了使用Vue-neo4j实现绘制三国人物图谱关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
最新评论