vue-splide icon indicating copy to clipboard operation
vue-splide copied to clipboard

Lazy loading does not work with dynamic image URLs

Open altrusl opened this issue 2 years ago • 2 comments

Checks

  • [X] Not a duplicate.
  • [X] Not a question, feature request, or anything other than a bug report directly related to Vue Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.6.12

Description

When i use dynamic images in Vue 3 / Vite project

<Splide :options="spliderOptions" aria-label="Providers">
    <SplideSlide v-for="provider in casinoStore.providers.value" :key="provider.id">
      <div class="provider" :title="provider.name" @click="filterByProvider(provider)">
        <img
          :data-splide-lazy="`/assets/images/providers/${provider.slug}.png`"
          class="image"
        >
      </div>
    </SplideSlide>
  </Splide>

all data-splide-lazy attributes are converted to src on the mount

With

data-splide-lazy="/assets/images/providers/someImg.png"

lazy-loading works fine

Reproduction Link

No response

Steps to Reproduce

  1. Use the code abouve with binding of image url's...

Expected Behaviour

Lazy loading should work with binded data-splide-lazy attribute

altrusl avatar Jul 14 '23 11:07 altrusl

same here....

Salotronic avatar Sep 13 '23 11:09 Salotronic

I think this bug is important, because causes to forze the browser to load ALL big images of the gallery at same time.

Salotronic avatar Sep 13 '23 11:09 Salotronic