Question

我为网站制作了Grid布局，它包含页眉，主要和页脚部分。网站采用了GatsbyJS，因此我想通过gatsby-image和GraphQL在网站的第一个屏幕上制作图像。出于我的目的，我制作了一个特殊的组件，该组件使用StaticQuery获取图像，然后渲染流体图像。图片组件：

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

const Image = () => {
  const data = useStaticQuery(graphql`
    query {
      mainImage: file(relativePath: { eq: "full_size.png" }) {
        childImageSharp {
          fluid(width: 900) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img imgStyle={{margin: '0'}} fluid={data.mainImage.childImageSharp.fluid} alt='Главная' />
}

export default Image

主要问题：当我尝试使用图像组件（上面的代码）时，我看不到布局中的图像，而是从现场下载的图像（我在Dev Tools中观看过）。因此，当我在Grid Layout之外使用图像组件时，一切都很好。同样在Grid中，我只能使用固定的gatsby-image，它将起作用。有什么问题吗？

感谢帮助！

具有网格布局的流畅的盖茨比图像

0 个答案: