Vue lazy loading banner

Question

I have 5 banners on the page that show or hide based on user clicks.

At this point the banner data is coming from the API, I'm iterating the banner component for each banner entry on the API, any idea how I can download the image only after the user clicks? I have tried the lazy loading native behavior but the images load at the beginning because they all appear on the first scroll and I show or hide the images by user click.

<banner-base
    v-for="banner in entry.banners"
    :key="banner.id"
    :slug-ficha="slugSelected"
    :promo-selected="promoSelected"
    :banner-id="banner.id"
/>

Answer 1

You can use the v-show directive on the img element and it will only show when the banner is clicked.