Vue.js获取图片宽高仅50%时间生效问题排查及实现方案咨询

• 直接读取Image实例宽高返回0的原因：Image对象加载图片资源是异步操作，你在实例化并赋值src后立刻读取width/height属性时，若图片已被浏览器缓存，加载流程瞬间完成就能拿到正确值；若图片未缓存，此时资源还未完成下载，宽高默认就是0，这就是你观察到的有时正确有时返回0的核心原因，确实和缓存逻辑直接相关。
• onload回调中返回内容无显示的原因：异步回调的返回值无法被外层同步执行的Vue模板渲染逻辑接收。你在methods中定义的方法在模板渲染时会同步执行并拿到返回值，而onload是在方法执行结束、图片加载完成后才触发的回调，回调内部的return根本不会传递给模板，所以页面没有内容展示。
• 事件报错的常见诱因：大概率是onload回调的this指向错误，未绑定到Vue实例，导致赋值响应式数据失败；或是没有处理图片加载失败的边界情况，触发未捕获的资源加载错误。

核心逻辑是用Vue响应式数据存储图片加载后的计算结果，不要依赖异步方法的返回值给模板提供内容：

1. 在data中声明响应式变量，存储最终要渲染的拼接内容、加载错误信息
2. 封装图片加载方法，在onload回调中完成宽高计算后，给响应式变量赋值
3. 模板直接绑定响应式变量做渲染，加载过程中可展示占位状态

代码示例 #

<template>
  <div class="image-crop-wrap">
    <!-- 加载中状态 -->
    <div v-if="isLoading">图片加载中...</div>
    <!-- 错误状态 -->
    <div v-else-if="loadError" class="error">{{ loadError }}</div>
    <!-- 最终渲染内容 -->
    <div v-else>{{ cropResult }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 替换为你的图片地址，也可以是props传入的动态地址
      targetImgUrl: '你的图片资源地址',
      isLoading: false,
      loadError: '',
      cropResult: ''
    }
  },
  created() {
    // 页面初始化时触发图片加载逻辑，若图片地址是动态的，可写在watch监听里
    this.handleImageCrop(this.targetImgUrl)
  },
  methods: {
    handleImageCrop(imgUrl) {
      this.isLoading = true
      this.loadError = ''
      const img = new Image()
      // 解决跨域图片加载的可选配置，不需要可删除
      img.crossOrigin = 'anonymous'
      
      // 加载成功回调，使用箭头函数保证this指向Vue实例
      img.onload = () => {
        this.isLoading = false
        const width = img.width
        const height = img.height
        // 这里替换为你自己的拼接逻辑
        this.cropResult = `图片尺寸：${width}px * ${height}px`
      }

      // 加载失败错误处理
      img.onerror = () => {
        this.isLoading = false
        this.loadError = '图片加载失败，请检查地址是否有效'
      }

      // 赋值src要放在回调声明之后，避免缓存图片触发回调时还未绑定监听
      img.src = imgUrl
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Lara M.