有没有办法在 Gatsby 和 Sharp 完全加载之前将 CSS 样式应用于延迟加载的图像？

Question

我使用 Sharp 在我的 Gatsby 网站上延迟加载图像。目前，图像开始模糊，"gain focus" 出现在屏幕上时。

我想在这些图片还在 "blurry mode" 时应用 CSS 样式或滤镜，并在它们完全加载后将其删除。但到目前为止，我没有看到 classes 在加载前后有任何变化。

有没有办法让图像在整个页面加载时具有 class，而在图像本身完全加载时失去 class？或者，有没有一种方法可以应用初始样式，然后在完全加载后将其删除？

谢谢！

Answer 1

是的。您可以像这样将 placeholderClassName & placeholderStyle 道具传递给 gatsby-image：

<Img 
    placeholderClassName="myPlaceHolderClassName"
    placeholderStyle={{transform: `rotate(90deg)`}}
    fluid={edge.node.fluid}
/>

Is there a way to apply CSS styling to lazy-loaded images before they fully load with Gatsby and Sharp?