el-image获取图片宽高
时间: 2023-10-16 17:10:24 浏览: 158
要获取el-image中的图片宽高,可以使用以下方法:
1. 首先,给el-image添加一个ref属性,例如`ref="imageRef"`。
2. 然后,在Vue组件的methods中,使用$refs来访问el-image的实例。
3. 使用`this.$refs.imageRef.$el`来获取el-image的DOM元素。
4. 使用`naturalWidth`和`naturalHeight`属性来获取图片的宽度和高度。例如,`this.$refs.imageRef.$el.naturalWidth`获取图片宽度,`this.$refs.imageRef.$el.naturalHeight`获取图片高度。
下面是一个示例代码:
```vue
<template>
<div>
<el-image ref="imageRef" src="your_image_url"></el-image>
</div>
</template>
<script>
export default {
methods: {
getImageSize() {
const width = this.$refs.imageRef.$el.naturalWidth;
const height = this.$refs.imageRef.$el.naturalHeight;
console.log('宽度:', width);
console.log('高度:', height);
}
},
mounted() {
this.getImageSize();
}
}
</script>
```
这样,你就可以在mounted钩子函数中获取到el-image的图片宽度和高度了。