Conflict with nuxt-lazy-load

[alijcode]

Describe the bug When using this with nuxt, I have a slider with images and I was using the nuxt-lazy-load module. The images break and do not load. On inspecting further, I found out that the src tag to the images in the slider are not being added itself.

To Reproduce Steps to reproduce the behavior:

1. Make a nuxt project and install nuxt-lazy-load module
2. Add a slider with some images in it
3. See broken images in slider ui

Expected behavior

1. Images are supposed to be lazy loaded and shown in the slider

[fnavarijo]

Hi! Maybe it's something with your configuration or use. I'm also using nuxt-lazy-load and it's working fine. I will share some code snippets hoping they can help you.

    // nuxt.config.ts
    ['nuxt-lazy-load', {
      directiveOnly: true,
      loadingClass: 'lazy-placeholder',
    }],

      <Hooper
        :settings="carouselConfiguration"
        @slide="onSlide"
      >
        <Slide
          v-for="(preview, index) in news"
          :key="index"
          :index="index"
        >
            <img
              v-lazy-load
              :data-src="preview.thumbnail.url"
              :alt="preview.thumbnail.alt"
            >
        </Slide>
      </Hooper>

As a note, the preview variable is an object with thumbnail as property.

[fayazara]

I was facing the same issue, it was because of the lazy-load component. You need to remove the lazy-load directive and try adding this data-not-lazy loading="lazy"

Atleast the new native lazy loading works

[workingxx92]

Same this bug