Flickity旋转木马内的盖茨比图片

Question

我正在创建一个gatsby网站，该网站使用flickity react组件来显示带有产品图像的滑块。我认为我应该使用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映像创建了一个div。

有人能帮我做这个吗？我是一个初学者，所以如果是非常高级的东西，我会很感激有其他选择。。。非常感谢。

Answer 1

事实上，gatsby-image不仅仅是一个简单的图像。它创建了一个包装器，里面有一些嵌套的divHTML结构，以实现模糊效果和其他改进。

看看gatsby-image文档：

注意：gatsby-image不是<img />的替代品。它是针对固定宽度/高度图像和拉伸容器的全宽。使用<img />的某些方法不起作用用CCD_ 8

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

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