Vue Nuxt中如何获取动态图片的原始宽高并设置到属性中

方法一：预加载图片提前获取宽高 #

这种方法会在组件初始化时加载图片（非懒加载），拿到原始宽高后再渲染，能避免图片加载时的布局偏移。

1. 转换数据结构：把API返回的纯URL数组，转成包含URL、宽高字段的对象数组，方便后续绑定：

// 在接口请求成功后或created钩子中处理数据
this.partnerLogos = this.page_content.partner_logo.map(url => ({
  url,
  width: null,
  height: null
}))

// 遍历预加载图片，获取原始宽高
this.partnerLogos.forEach(item => {
  const img = new Image()
  img.src = item.url
  img.onload = () => {
    // 用naturalWidth/naturalHeight获取图片原始尺寸
    item.width = img.naturalWidth
    item.height = img.naturalHeight
  }
})

2. 修改模板绑定：把width和height绑定到数据中的对应字段：

<a v-for="logo in partnerLogos" :key="logo.url" href="#" aria-label="partners">
  <img
    :ref="logo.url"
    :data-src="logo.url"
    alt="partner logo"
    :width="logo.width"
    :height="logo.height"
    class="lazyload home-brand-logo hoverableArea"
  >
</a>

方法二：监听懒加载图片的加载事件 #

如果你用的是懒加载插件（比如基于lazyload类的实现），可以等图片实际加载完成后，再获取并设置宽高：

1. 模板添加load事件监听：

<a v-for="partner_logo in page_content.partner_logo" :key="partner_logo" href="#" aria-label="partners">
  <img
    :ref="partner_logo"
    :data-src="partner_logo"
    alt="partner logo"
    @load="setImageSize(partner_logo)"
    class="lazyload home-brand-logo hoverableArea"
  >
</a>

2. 添加处理方法：通过ref获取图片DOM，读取原始宽高并设置：

methods: {
  setImageSize(url) {
    // v-for生成的ref是数组，取对应索引的元素
    const imgEl = this.$refs[url]?.[0]
    if (imgEl) {
      imgEl.width = imgEl.naturalWidth
      imgEl.height = imgEl.naturalHeight
    }
  }
}

注意事项 #

• naturalWidth和naturalHeight是HTML5属性，直接返回图片的原始像素尺寸，不受CSS缩放影响
• 预加载方法会额外发起图片请求，如果图片体积较大，可能影响首屏性能，适合图片数量少的场景
• 懒加载场景下，确保你的懒加载插件会触发load事件，否则需要改用插件提供的回调钩子

内容的提问来源于stack exchange，提问作者Oussama Louelkadi