Puedo usar un IntersectionObserver para cargar imágenes de forma diferida de esta manera:

 <template> <div id="gallery" class="gallery"> <div class="gallery-card"> <a href="#"><img src="../../images/1.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/2.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/3.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/4.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/5.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/6.jpg"></a> </div> </div> </template> <script setup> import {onMounted} from "vue"; onMounted(() => { let config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; const observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if(entry.isIntersecting) { const img = entry.target img.src = img.dataset.src self.unobserve(img); } }); }, config); const lazyImages = document.querySelectorAll('[data-src]'); lazyImages.forEach(img => { observer.observe(img); }); }) </script>

pero cuando trato de observar elementos generados con la directiva v-for , el observador no puede leer los elementos representados. Supongo que el observador se ejecuta antes de que se representen los elementos.

¿Cómo aplico IntersectionObserver a elementos generados en la directiva v-for como:

 <template> <div id="gallery" class="gallery"> <div v-for="row in imageTable" class="gallery-card"> <a href="#gallery-view"><img :src="'../../images/ph.png'" :data-src="'/storage' + row['path']"></a> </div> </div> </template>