Flickity 轮播中的 Gatsby 图片

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:

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.

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

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

Flickity 轮播中的 Gatsby 图片

Gatsby Image inside Flickity carousel

reactjs

gatsby

flickity

gatsby-image