记录uniapp组件报警告Maximum recursive updates exceeded in component ＜View＞

今天写了一个瀑布流报错如下
Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

经排查是因为组件中写image一个方法造成的，这就是纯属自己想不开，这里我想写一个计算让图片高度自适应，后来报警告想了一下image mode=“widthFix” 不就是 宽度不变，高度自动变化，保持原图宽高比不变。

错误代码

 <image
  :src="$App.cdnSrc(item?.image)"
   class="item-img"
   :style="{ height: imgHeight + 'rpx' }"
   @load="onImgLoad"
 />

const imgHeight = ref(240);
let onImgLoad = (e) => {
  // 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
  try {
    const { width, height } = e.detail || e.mp.detail;
    imgHeight.value = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
  } catch (e) {
    //TODO handle the exception
    console.log("onImgLoad", e);
  }
};

正确的

<image
 :src="$App.cdnSrc(item?.image)"
  mode="widthFix"
  class="item-img"
/>