Lazy-loaded srcset not updated

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);

[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