flexbox - 当容器变成弹性容器 gatsby 时，图像消失

Question

我有一个用 Gatsby 版本 2 制作的页面，我想在 flexbox 容器内从 gatsby-image 制作组件。当我删除 display: flex; 时出现图像属性并在容器是 flex 容器时消失。

当我在开发工具中查看 Gatsby 应用的 CSS 样式时，我尝试将属性一一取消选择。当我取消选择 position: absolute;属性，图像出现，但它的大小或放置不正确。

我也试过设置 flex-direction: column;在容器上，这使得两个图像中的第二个出现。但是，我更愿意将此值改为行。

设置 overflow: visible !important;在图像上没有使图像出现。

import React from "react"
import { Link } from "gatsby"
import { css } from "@emotion/core"
import Img from "gatsby-image"

const testPage = props => (
  <div
    css={css`
      display: flex;
      flex-direction: // column or row;
    `}
  >
    <Img
      fluid={props.data.ImgOne.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
      style={{
        ...(props.style || {}),
        maxWidth: "400px",
        // position: "absolute",
        // overflow: "visible !important",
        ...props.data.ImgOne.childImageSharp.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      }}
    />
    Some text to go in between pics.
    <Img
      fluid={props.data.ImgTwo.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
    />
  </div>
)

export default testPage

export const pageQuery = graphql`
  query {
    ImgOne: file(relativePath: { eq: "ImageOne.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400) {
          ...GatsbyImageSharpFluid_withWebp
          presentationWidth
        }
      }
    }

    ImgTwo: file(relativePath: { eq: "ImageTwo.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
`

Answer 1

我遇到了同样的问题。原来是因为对 Flexbox 和 Gatsby Image 的工作原理缺乏了解。

您正在使用 GatsbyImageSharpFluid。与“固定”相反的 Gatsby 形象的“流动”类型。您已经设置了最大宽度是。但最终，“流动”的想法是图像将采用其容器的大小。 Max-width 是它可以扩展到的最大值 - 只有当容器达到该宽度时才达到。

在 flexbox 中，它是设置容器宽度的内容宽度。这是 flex 的原理...但是流体图像没有宽度，因此您的 flex 容器也没有宽度 => 您的图像不会出现。

解决方案:为您的 flex-item 设置固定宽度或使用固定 Gatsby Image 代替。

请参阅 Gatsby 文档关于固定图像与流体图像:https://www.gatsbyjs.org/docs/gatsby-image/