1

Can anyone help me out how to pass Airtable data into the 'data-src' variable for my image? Details below.

I created a simple html site, where I use Vue/Airtable to pass some images from my Airtable base to an html object:

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

I have included jQuery Lazy, but can't seem to get it to work – everything loads as soon as the page loads. I think I need to pass the Airtable data to a 'data-src' variable rather than ':src' – but when I try the code below, nothing appears at all:

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

I just started out using Vue and Airtable, and have very little coding experience overall. Any help appreciated!

CasperN
  • 11
  • 2
  • 1
    `:src-data` is not `:data-src` – Jaromanda X Oct 31 '20 at 22:45
  • @JaromandaX ah sorry that was a typo in here! I corrected it now. Do you have any idea how to fix it? :) – CasperN Oct 31 '20 at 23:05
  • Please avoid posting duplicates. You've already asked it [here](https://stackoverflow.com/questions/64631485/how-can-i-make-my-image-and-video-content-lazy-load-airtable-vue) – Vinay Nov 01 '20 at 13:55
  • @Viney Wasn't sure I framed it in the right way – but maybe I should've just edited the post instead. Will keep in mind! – CasperN Nov 01 '20 at 15:02

0 Answers0