React-id-swiper: Lazy-loaded srcset not updated

[cweise]

Hi, I am using Swiper with lazy load functionality. When I update the images prop the srcset attribute does not get updated. Am I doing something wrong?

import React from 'react';
import styled, { withTheme, injectGlobal } from 'styled-components';
import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

import { CLOUDINARY_HOST } from '../../config';

const SwiperLazyImage = styled.img`
  max-width: 100%;
`;

const StyledImage = ({ srcset }) => (
  <SwiperLazyImage className="swiper-lazy" data-srcset={srcset} sizes="100%" alt="" />
);

const Preloader = styled.div``;

class ImageCarousel extends React.Component {

  componentDidUpdate() {
    console.log(this.swiper);
    this.swiper.update();
  }

  render() {
    const { images } = this.props;
    const imageNodes = images.map((image, key) => {

      const imageTransforms = `
        ${CLOUDINARY_HOST}/w_320,ar_3:4,q_70,f_auto,c_fill${image} 320w,
        ${CLOUDINARY_HOST}/w_640,ar_3:4,q_70,f_auto,c_fill${image} 640w,
        ${CLOUDINARY_HOST}/w_960,ar_3:4,q_70,f_auto,c_fill${image} 960w,
        ${CLOUDINARY_HOST}/w_1280,ar_3:4,q_70,f_auto,c_fill${image} 1280w
      `;

      return (
        <div key={key}>
          <StyledImage srcset={imageTransforms} />
          <Preloader className="swiper-lazy-preloader" />
        </div>
      )}
    );

    const params = {
      slidesPerView: 1,
      preloadImages: false,
      lazy: {
        loadPrevNext: true,
      },
      pagination: {
        el: '.swiper-pagination',
      }
    };

    injectGlobal`
      .swiper-pagination-bullets { bottom: 0 !important; }
      .swiper-pagination-bullet-active { background: ${ this.props.theme.colors.tangerine } !important; }
    `;

    return (
      <Swiper ref={(node) => this.swiper = (node) ? node.swiper : null} {...params}>
        {imageNodes}
      </Swiper>
    );
  }
}

export default withTheme(ImageCarousel);

[kidjp85]

Hi @cweise , did u try using data-srcset instead of srcset?

[cweise]

Hi @kidjp85, yes I am trying. See

const StyledImage = ({ srcset }) => (
  <SwiperLazyImage className="swiper-lazy" data-srcset={srcset} sizes="100%" alt="" />
);

Do you have another idea? Thank you so much for your help.

[kidjp85]

Hi @cweise , sorry for my late response. So busy recently. Did u try shouldSwiperUpdate or rebuildOnUpdate params ? I think it may fix the issue in your case

[cweise]

Hi @kidjp85,
yes I did with no luck. It seems like there is an issue with srcSet and data-srcset after reinit.

[ntucakovic]

I've read the lazy load implementation, it's because there's no check whether src is matching data-src.

If you update data-srcset (or data-src for that matter), you need to tell React that it's a unique child compared to previous one (which it is).

So adding a key property that is unique to the original image URL would work. It will tell react to re-render the new image (and containing slide).

Other option is to implement useEffect to watch for image changes and call .update() on swiper instance. I also had the need to do swiperInstance.lazy.load(); when I change the images. (because first image for some reason won't be downloaded, that's due to lazy implementation and not the React fix we're addressing with key property).

Just to help out someone looking through this issue, I see it's quite stale.

[theskillwithin]

if using gatsby #394