Vue入门必看：轻松获取图片原始宽度，不再为尺寸问题烦恼！

图片原始宽度获取方法

1. 使用HTML5的naturalWidth属性

<template>
  <div>
    <img :src="imageSrc" @load="handleImageLoad" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
      originalWidth: 0
    };
  },
  methods: {
    handleImageLoad() {
      this.originalWidth = this.$el.querySelector('img').naturalWidth;
      console.log('Original width:', this.originalWidth);
    }
  }
};
</script>

2. 创建一个新的Image对象

<template>
  <div>
    <img :src="imageSrc" @load="handleImageLoad" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
      originalWidth: 0
    };
  },
  methods: {
    handleImageLoad() {
      const img = new Image();
      img.src = this.imageSrc;
      img.onload = () => {
        this.originalWidth = img.width;
        console.log('Original width:', this.originalWidth);
      };
    }
  }
};
</script>

3. 使用CSS样式计算

<template>
  <div>
    <img :src="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'path/to/your/image.jpg',
      originalWidth: 0
    };
  },
  mounted() {
    const img = new Image();
    img.src = this.imageSrc;
    img.onload = () => {
      this.originalWidth = window.getComputedStyle(img).width;
      console.log('Original width:', this.originalWidth);
    };
  }
};
</script>

总结