Gatsby背景图片无法在特定屏幕尺寸下渲染文本

问题描述

我正在创建一个投资组合的主页，并且我希望在背景图像的前面有文本，该文本根据用户屏幕的大小而变化。现在，图像根据用户的屏幕尺寸而改变；但是，如果屏幕太小或以不同的屏幕尺寸开始加载，则前面的文本会消失。

import 'bootstrap/dist/css/bootstrap.min.css'
import BackgroundImage from "gatsby-background-image"
import '../styles/global.scss';
import { graphql,useStaticQuery } from "gatsby"

export default function MainPage() {
  const size = useWindowSize();
  const data = useStaticQuery(graphql`
  query {
    background: file(relativePath: {eq: "image.png"}) {
      childImageSharp {
        fluid(maxWidth: 2000) {
          ...GatsbyImageSharpFluid
        ...GatsbyImageSharpFluidLimitPresentationSize        }
      }
    }
    backgroundMed: file(relativePath: {eq: "image-med.png"}) {
      childImageSharp {
        fluid(maxWidth: 800) {
          ...GatsbyImageSharpFluid
        ...GatsbyImageSharpFluidLimitPresentationSize        }
      }
    }
    backgroundSm: file(relativePath: {eq: "image-sm.png"}) {
      childImageSharp {
        fluid(maxWidth: 600) {
          ...GatsbyImageSharpFluid
        ...GatsbyImageSharpFluidLimitPresentationSize        }
      }
    }

  }
  `)
  let sizeImg; 
  let width = size.width;
  if (width < 533) {
    sizeImg = data.backgroundSm.childImageSharp.fluid;
  } else if (width < 656) {
    sizeImg = data.backgroundMed.childImageSharp.fluid;
  } else {
    sizeImg = data.background.childImageSharp.fluid;
  }
console.log(sizeImg);
 return (
  <BackgroundImage id={`background-intro`} fluid={sizeImg}>

        <div id="header" className="flex" data-sal="fade">
          <div id="main"></div>
          <br />
          <h1>hey,welcome to my site.</h1>
           <h3> Sample text</h3>
          <br />
        </div>
          <br />
          <br />
          <br />

        </div>
        </BackgroundImage>


              );
}

function useWindowSize() {
  // Initialize state with undefined width/height so server and client renders match
  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
  const [windowSize,setwindowSize] = useState({
    width: undefined,height: undefined,});

  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      // Set window width/height to state
      setwindowSize({
        width: window.innerWidth,height: window.innerHeight,});
    }
    
    // Add event listener
    window.addEventListener("resize",handleResize);
    
    // Call handler right away so state gets updated with initial window size
    handleResize();
    
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize",handleResize);
  },[]); // Empty array ensures that effect is only run on mount

  return windowSize;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）