Quasar中使用@load/onload事件时图片骨架加载器无限加载的问题求助

大家好，我在Quasar项目里遇到了一个头疼的问题：图片的骨架加载器会无限加载，始终无法自动隐藏，不管是用Quasar q-img组件的@load事件，还是原生Image对象的onload方法都解决不了，想请大家帮忙看看。

第一种尝试：直接用q-img的@load事件 #

最开始我参考Quasar文档，用q-img的@load事件来监听图片加载完成，然后控制骨架的显示：

<script setup>
import { ref } from 'vue';

const imgLoaded = ref({});
</script>

<template>
  <!-- 图片未加载完成时显示骨架 -->
  <q-skeleton v-if="!imgLoaded[img?.image_url]"></q-skeleton>
  <!-- 加载完成后触发@load，标记该图片已加载 -->
  <q-img @load="(url) => imgLoaded[url] = true" :src="img?.image_url" />
</template>

根据Quasar文档，@load事件会在浏览器成功加载图片后触发，参数就是该图片的URL。按逻辑，当imgLoaded[url]被设为true后，v-if的条件不满足，骨架就会消失，显示出图片。但实际运行时，骨架一直在无限加载，完全没反应。

第二种尝试：用原生Image对象预加载 #

后来我换了个思路，在组件挂载后用原生Image对象预加载所有图片，通过onload事件标记加载完成：

<script setup>
import { ref, onMounted } from 'vue';
import { storeProducts } from '@/stores/products';

const imgLoaded = ref({});

const onImgLoad = (url) => {
    imgLoaded.value[url] = true;
};

onMounted(() => {
    // 从store中获取商品列表，预加载每个商品的图片
    if (storeProducts.featuredProducts && storeProducts.featuredProducts.length) {
        storeProducts.featuredProducts.forEach((product) => {
            const img = new Image();
            img.onload = () => onImgLoad(product?.image_url);
            img.src = product?.image_url;
        });
    }
});
</script>

<template>
  <q-skeleton v-if="!imgLoaded[img?.image_url]"></q-skeleton>
  <q-img :src="img?.image_url" />
</template>

结果还是一样的问题，骨架加载器始终停留在页面上，根本不会消失。

我观察到的细节 #

我排查的时候发现两个奇怪的点：

• imgLoaded.value初始值是{}，我并没有预先把每个图片URL对应的属性设为false；
• 不管用哪种方法，图片加载完成后，imgLoaded[img.image]都没有被成功设为true——这应该是骨架不消失的直接原因，但我找不到为什么赋值不生效。

有没有大佬能帮我分析下问题出在哪？或者有没有其他可靠的方法来控制Quasar骨架加载器的显示隐藏？

备注：内容来源于stack exchange，提问作者Michael