Trouble implementing lazy loading with Vue and Airtable images

Other Questions Airtable
1

I’m struggling to make lazy loading work for images from Airtable using Vue. Can someone help?

I’ve set up a basic website that pulls images from my Airtable database using Vue. Right now, I’m using this code to display the images:

<img class="lazy" id="img1" :src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']">

The problem is that all images load right away when the page opens. I tried using jQuery Lazy for lazy loading, but it’s not working as expected.

I think I need to use ‘data-src’ instead of ‘:src’, but when I try this:

<img class="lazy" id="img1" :data-src="item['fields']['Photo'][0]['thumbnails']['large']['url']" alt="" v-if="item['fields']['Photo']">

Nothing shows up at all. I’m pretty new to Vue and Airtable, so I’m not sure what I’m doing wrong. Any tips or advice would be really helpful!

2

hey there! have u tried using the v-lazy-load directive? it’s pretty cool for lazy loading in vue. just install it with npm, then use it like this:

should work with ur airtable images. hope this helps!

3

I’ve been in a similar situation with lazy loading Airtable images in Vue. What worked for me was using the Intersection Observer API directly. Here’s a quick rundown:

  1. Create a simple component for lazy loading:
<template>
  <img :data-src="imageSrc" class="lazy" ref="lazyImage">
</template>

<script>
export default {
  props: ['imageSrc'],
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.$refs.lazyImage.src = this.$refs.lazyImage.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    });
    observer.observe(this.$refs.lazyImage);
  }
}
</script>
  1. Use it in your main component:
<lazy-image :image-src="item.fields.Photo[0].thumbnails.large.url"></lazy-image>

This approach worked smoothly with my Airtable images and significantly improved load times. Just make sure to handle cases where the image might not exist to avoid errors.

4

Have you considered using the Intersection Observer API? It’s a powerful tool for lazy loading images in Vue. Here’s a basic implementation:

  1. Create a custom directive:
Vue.directive('lazyload', {
  inserted: el => {
    function loadImage() {
      el.src = el.dataset.src
    }

    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        loadImage()
        observer.unobserve(el)
      }
    })

    observer.observe(el)
  }
})
  1. Use it in your template:
<img v-lazyload :data-src="item.fields.Photo[0].thumbnails.large.url" alt="">

This approach is efficient and works well with dynamic content from Airtable. Remember to handle cases where images might not exist to avoid errors.