vue获取图片的尺寸

在Vue中获取图片的尺寸可以通过使用JavaScript的Image对象来实现。以下是一个示例代码，展示了如何在Vue组件中获取图片的尺寸：

<template>
  <div>
    <img ref="image" src="example.jpg" @load="getImageSize" alt="Example Image">
    <p>图片尺寸：{{ imageWidth }}x{{ imageHeight }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageWidth: 0,
      imageHeight: 0
    };
  },
  methods: {
    getImageSize() {
      const imageElement = this.$refs.image;
      const image = new Image();

      image.onload = () => {
        this.imageWidth = image.width;
        this.imageHeight = image.height;
      };

      image.src = imageElement.src;
    }
  }
};
</script>

在上述示例代码中，我们首先在`<img>`标签中引入了要获取尺寸的图片，并在`@load`事件中调用了`getImageSize`方法。在`getImageSize`方法中，我们使用了`this.$refs.image`来获取到图片元素的引用，然后创建了一个新的Image对象。当图片加载完成后，`onload`事件触发，我们可以获取到图片的宽度和高度，并将其赋值给Vue组件的`imageWidth`和`imageHeight`属性。

请将代码中的`example.jpg`替换为您要获取尺寸的图片路径。

这样，当您在Vue应用中加载图片时，将会自动获取到图片的尺寸，并在页面上显示出来。

希望这对您有所帮助！如有任何疑问，请随时提问。