Vue 延迟加载横幅

Question

I Have 5 banners on a page that are shown or hide depending on a user click selection.

At this point the banners data comes from an API and I am iterating a banner component for every banner entry I have on the API, Any idea on how i can get the image downloaded only after a user click? I have tried lazy-loading native behavior, but the images load at the beguinning because all of them appears at first scroll, I show or hide images with 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 v-show directive on the img element and it will show only when the banner is clicked.