今天写了一个瀑布流报错如下
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"
/>