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实现DOM元素拖放互换位置示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要为大家详细介绍了vue实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了Element Breadcrumb 面包屑的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
解决@vue/cli安装成功后,运行vue -V报:不是内部或外部命令的问题
这篇文章主要介绍了解决@vue/cli安装成功后,运行vue -V报:不是内部或外部命令的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue中的生命周期及钩子函数,Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染,下面文章详细介绍,需要的朋友可以参考一下2021-12-12
要在Web页面中加入地图,我推荐你使用高德地图JSAPI,下面这篇文章主要给大家介绍了关于VUE项目调用高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue开发移动端底部导航条功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件
这篇文章主要介绍了vue-devtools 开发工具插件之支持vue3 chrome 浏览器插件,用这个版本主要是为了支持vue3 推荐直接下载，文中给大家提供了下载地址，感兴趣的朋友跟随小编一起看看吧2022-01-01
本文主要介绍了Vue nextTick获取更新后的DOM的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
第一次用Vue+MySQL实现注册登录功能,就已经踩了很多坑,下面这篇文章主要给大家介绍了关于使用Vue+MySQL实现登录注册案例的相关资料,需要的朋友可以参考下2022-05-05
最新评论