如何解决Flickity轮播中的Gatsby图像
我正在创建一个使用flickity-react-component来显示带有产品图片的滑块的gatsby网站。我相信我应该使用gatsby图像来加快加载速度，但是当我尝试该图像时，该图像不会显示（它是0x0像素）。
这是我要运行的代码：
https://www.alibaba.com/consumer-electronics/action-sports-camera/p44_p201340102?spm=a2700.8293689.HomeLeftCategory.d201340102.2f9a67afhxyQdZ“图”是使用盖茨比图像的图像，其他图像是我以前使用的图像。
运行此程序时我没有收到错误，我相信这可能是因为gatsby-image创建了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>
);
}
。
有人可以帮助我完成这项工作吗？我是一个初学者，所以如果它非常高级，我将不胜感激……谢谢。
解决方法
实际上，gatsby-image不仅仅是一个简单的图像。它创建了一个包装，其中包含一些嵌套的div HTML结构，以产生模糊效果和其余的改进。
注意：
gatsby-image不能替代<img />。它的 针对固定的宽度/高度图像和拉伸图像的图像进行了优化 容器的全角。您使用<img />的某些方式无效gatsby-image。
它可能不适用于所有滑块。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
