Vue.js with Database Integration - Lazy Loading Images Not Functioning

Other Questions Airtable
1

I need help setting up lazy loading for images that come from a database through Vue.js

I built a website that pulls image data from my database and displays them using Vue. Right now I’m using this code:

<img class="lazy-load" id="photo1" :src="record['data']['Image'][0]['sizes']['big']['link']" alt="" v-if="record['data']['Image']">

I added a lazy loading library but it doesn’t work properly. All images load right away instead of waiting. I think the problem is that I need to use ‘data-src’ instead of ‘:src’ for the database content, but when I try this approach nothing shows up:

<img class="lazy-load" id="photo1" :data-src="record['data']['Image'][0]['sizes']['big']['link']" alt="" v-if="record['data']['Image']">

I’m pretty new to Vue and working with databases. Has anyone dealt with this before? What am I missing here?

2

Had this exact problem building an image gallery for our product catalog. Lazy loading libraries expect static HTML, but you’re working with dynamic Vue content.

What worked for me: ditch the external library and build a simple lazy loader in Vue. Create a ref for each image and use Intersection Observer API in a composable.

const imageRef = ref(null)
const isVisible = ref(false)

useIntersectionObserver(imageRef, ([{ isIntersecting }]) => {
  if (isIntersecting) isVisible.value = true
})

Then in your template:

<img ref="imageRef" 
     :src="isVisible ? record['data']['Image'][0]['sizes']['big']['link'] : ''"
     v-if="record['data']['Image']">

Vue handles the reactivity and you control exactly when images load. No timing issues with external libraries scanning the DOM before your database data shows up.

Worked great for our dashboard with hundreds of dynamic API images.

3

Classic problem with lazy loading and dynamic content. Most lazy loaders scan the DOM once at startup and miss images that Vue adds later. Since you’re pulling images from the database, they’re loading after the lazy loader already finished its scan.

I’ve hit this same issue with async image galleries. Two things that worked for me: build a custom directive that handles Vue reactivity and lazy loading together, or ditch external libraries and use Vue’s built-in lazy loading with Intersection Observer. The second option gives you way more control over timing with database content.

The trick is running your lazy loading logic after the data actually hits the DOM, not just when the component mounts.

4

same issue here! check that your lazy loading library handles dynamic content properly. initialize it in mounted() or wrap it with nextTick() so the images render first. usually it’s just a timing problem.

5

i’ve faced this too! lazy load libs sometimes miss dynamic images. consider using vue’s built-in v-lazy or implement an img placeholder until data loads. it’ll save u from timing issues. good luck!

6

The lazy loading library needs data-src to work, but you’ve got a Vue reactivity timing problem. The library initializes before your Vue data loads from the database. Use a ref to trigger the lazy loader after your data comes in. I’ve hit this same issue with Intersection Observer libraries - they scan for images at startup and miss anything added later. Try calling the library’s refresh method in your component’s updated hook, or set up a watcher on your record data to restart lazy loading once the database content shows up.