reactjs - Gatsby 与 React 挂钩砖石 - 我可以加载具有纵横比的媒体吗？

Question

我有一个 Gatsby投资组合，其中包含大量大型 jpgs/gifs/mp4s，使用react hook masonry。因为它是在列中加载的，所以实际上存在不希望的卡顿加载，其中图像有点碰撞并相互向下推。

我希望 jpgs/gifs/mp4s 在加载时淡入，而不是跳入并推送内容，但我不知道该怎么做，我认为我需要以某种方式对纵横比进行编程。请注意，我不能每次都使用 Gatsby Image 来计算宽高比，因为我还使用了与 Gatsby Image 不兼容的 gif 和 mp4。

下面是我如何使用 graphql从 Gatsby 调用图像，我使用 Netlify CMS 来托管媒体。Gatsby Image 具有仅适用于 jpg 的纵横比功能，但文档很少。我的另一个想法是，也许我需要在 Netlify CMS 中创建一个采用纵横比的字段，但这似乎很笨重。

如果有人有任何提示，我将不胜感激，谢谢！

Answer 1

您应该使用gatsby-image来优化您的图像。它具有延迟加载功能，因此图片不会在它们出现在屏幕上时才开始加载等。

你提到的纵横比也是 gatsby-image 插件的一个特性。

但无论如何，这些图片会相互推动，因为它们的尺寸不同。您应该使用 gatsby-image 来“裁剪”图像或调整它们的大小。

或者，您可以将它们放在一个容器 div 中，该容器 div 在给定的纵横比中具有固定大小。然后，您可以简单地将图像放入 100% 宽度和自动高度以及对象适合属性的内部。