Vue 지연 로딩 배너

Question

페이지에 사용자 클릭에 따라 표시되거나 숨겨지는 배너가 5개 있습니다.

이 시점에서 배너 데이터는 API에서 가져오고 API의 각 배너 항목에 대해 배너 구성 요소를 반복하고 있습니다. 사용자가 클릭한 후에만 이미지를 다운로드할 수 있는 방법이 있습니까? 지연 로딩 기본 동작을 시도했지만 이미지가 모두 첫 번째 스크롤에 나타나고 사용자 클릭으로 이미지를 표시하거나 숨기기 때문에 처음에 이미지가 로드됩니다.

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

Answer 1

img 元素上使用 v-show 지시문에서 이 작업을 수행할 수 있으며 배너를 클릭할 때만 표시됩니다.