Gatsby Image inside Flickity carousel

Question

I am creating a gatsby website that uses the flickity-react-component to display a slider with product images. I believe that I should use the gatsby image to make it load faster, but when I try it, the Image does not display (it is 0x0 pixels).

This is the code I am trying to run:

const ThirdPage = ({ data }) => {
...

function Carousel() {
    return (
        <Flickity
            className={'carousel'} // default ''
            elementType={'div'} // default 'div'
            options={flickityOptions} // takes flickity options {}
            disableImagesLoaded={false} // default false
            reloadOnUpdate // default false
            static // default false
        >
            <Img fluid={data.imgPrincipal.childImageSharp.fluid} alt="Mulher a lavar o cabelo com o chuveiro ecológico" />
            <img src="https://placeimg.com/640/480/nature" />
            <img src="https://placeimg.com/640/480/nature" />
            <img src="https://placeimg.com/640/480/architecture" />
        </Flickity>
    );
}

The "Img" is the one using the gatsby image, the others are what I had before.

This is the result

I don't get an error when running this, I believe this might be because gatsby-image creates a div.

Can someone help me make this work? I am a beginner, so if it's something very advanced, I would appreciate an alternative ... Thank you.

Answer 1

Indeed, gatsby-image is not only a simple image. It creates a wrapper with a few nested div HTML structure inside to make the blur effect and the rest of the improvements.

Take a look at gatsby-image docs:

Note: gatsby-image is not a drop-in replacement for <img />. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img /> won’t work with gatsby-image.

It may not work with all sliders.

I've used it with other sliders that accept a nested structure inside, not only a single <img> tag such as Swiper or Slick.