Question

我正在尝试将CSS应用于gatsby-image。 Gatsby不断渲染未应用样式的HTML。

在此示例中，我尝试应用transition: 3s：

<Picture ... className="test" style={{ transition: '3000ms'; }}/>
<style jsx>{`
     .test img {
         transition: 3000ms !important;
     }
     .test picture {
         transition: 3000ms !important;
     }
     img {
         transition: 3000ms !important;
     }
     picture {
         transition: 3000ms !important;
     }
     ...

当我在浏览器中打开呈现的页面时，可以在devtools中看到<Picture>标记生成为：

<div class="test gatsby-image-wrapper" ...>
    <img ...> // placeholder SVG
    <picture ... <img...>> // actual image with what I believe is img fallback for older browsers

当我选择这3个元素中的任何一个时，即使在多个位置将transition设置为0.5s，我也可以看到。

Here是演示问题所需的完整代码。 Here是显示未应用CSS的屏幕截图。

Answer 1

在 Gatsby 中，它们有自己的结构来创建图像以尽可能优化结果，因此，如果您想为图像、图像的包装器或占位符添加自定义样式，则应使用：

import Img from 'gatsby-image'

<Img style="<wrapper's_style_comes_here>" imgStyle="<img_style_comes_here>" placeholderStyle="<placeholder_style_comes_here>" .../>

有关更多信息，请查看 Gatsby 的图像插件 website。

盖茨比：如何将CSS应用于盖茨比图像

1 个答案: