Flickity 轮播中的盖茨比图片

Question

我正在创建一个 gatsby 网站，该网站使用 flickity-react-component 来显示带有产品图像的滑块。我相信我应该使用 gatsby 图像使其加载更快，但是当我尝试它时，图像不显示（它是 0x0 像素）。

这是我要运行的代码：

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

“Img”是使用 gatsby 图像的，其他的是我以前的。

This is the result

运行时我没有收到错误，我相信这可能是因为 gatsby-image 创建了一个div。

有人可以帮我完成这项工作吗？我是初学者，所以如果它是非常先进的东西，我将不胜感激......谢谢。

Answer 1

确实，gatsby-image 不仅仅是一张简单的图片。它创建了一个包装器，其中包含一些嵌套的 div HTML 结构，以实现模糊效果和其余改进。

看看gatsby-image docs：

注意：gatsby-image 不是<img /> 的直接替代品。它的 针对固定宽度/高度图像和拉伸图像进行了优化 容器的全宽。您可以使用<img /> 的某些方法不起作用 gatsby-image。

它可能不适用于所有滑块。

我已经将它与其他接受嵌套结构的滑块一起使用，而不仅仅是单个 <img> 标记，例如 Swiper 或 Slick。