[英]Background photo not displaying with GraphQL in Gatsby
I'm learning GraphQL and I tried to make a background photo at the Hero section.我正在学习 GraphQL 并尝试在英雄部分制作背景照片。 It does not work and I tried a lot to fix it.
它不起作用,我尝试了很多来修复它。 The code I used is below.
我使用的代码如下。 Some modules are imported for other parts of the file.
为文件的其他部分导入了一些模块。 There is no error while running the code.
运行代码时没有错误。 The background photo just does not display.
只是不显示背景照片。 I also attached code from gatsby-config.js.
我还附加了来自 gatsby-config.js 的代码。
import React from 'react' import styled from "styled-components" import { StaticQuery, graphql } from 'gatsby' import { StaticImage, GatsbyImage } from 'gatsby-plugin-image' import { Form } from 'react-bootstrap' import "bootstrap/dist/css/bootstrap.min.css" const Hero = ({myBackground}) => { return ( <HeroContainer> <HeroBg> {myBackground.allFile.edges.map(({node}) => ( <p key={node.id}> {node.base} </p> ))} </HeroBg> </HeroContainer> export default Hero; export const myBackground = graphql` query MyQuery { allFile { edges { node { id base relativePath relativeDirectory childImageSharp { gatsbyImageData } } } } } ` const HeroContainer = styled.div` display: flex; justify-content: center; align-items: center; padding: 0 1rem; position: relative; height: 100vh; margin: -104px -8px -10px -8px; color: #fff; background-color: lightgreen; ` const HeroBg = styled.div` position: absolute; height: 100vh; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; overflow: hidden; `
The gatsby-config.js file below:下面的 gatsby-config.js 文件:
plugins: [ `gatsby-plugin-react-helmet`, `gatsby-plugin-image`, `gatsby-plugin-styled-components`, { resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/src/images`, }, }, `gatsby-transformer-sharp`, `gatsby-plugin-sharp`, `gatsby-transformer-json`, { resolve: `gatsby-source-filesystem`, options: { path: `./src/data/`, }, },
Assuming that your GraphQL query works as expected and fetches the proper data, your issue is on props destructuring and data loop.假设您的 GraphQL 查询按预期工作并获取了正确的数据,那么您的问题出在道具解构和数据循环上。
Your component should look like:您的组件应如下所示:
const Hero = ({data}) => {
return (
<HeroContainer>
<HeroBg>
{data.allFile.edges.map(({node}) => {
console.log(node);
return <p key={node.id}>
{node.base}
</p>
})}
</HeroBg>
</HeroContainer>
export default Hero;
export const myBackground = graphql`
query MyQuery {
allFile {
edges {
node {
id
base
relativePath
relativeDirectory
childImageSharp {
gatsbyImageData
}
}
}
}
}
`
Since you are using a page query , your approach will only work if Hero
is a top-level component (a page inside src/pages
).由于您使用的是 页面查询,因此您的方法只有在
Hero
是顶级组件( src/pages
中的页面)时才有效。 In that case, your fetched data will be always inside props.data.queryOuterNode
, where queryOuterNode
stands for allFile
in this case.在这种情况下,您获取的数据将始终位于
props.data.queryOuterNode
中,在这种情况下, queryOuterNode
代表allFile
。
If you are using an isolated component to fetch the data as it seems, you will be forced to use a useStaticQuery
hook to fetch data in a non-top-level component.如果你正在使用一个孤立的组件来获取数据,你将被迫使用
useStaticQuery
钩子来获取非顶级组件中的数据。 In this case, your component should look like:在这种情况下,您的组件应该如下所示:
const Hero = () => {
const data = useStaticQuery(graphql`
query MyQuery {
allFile {
edges {
node {
id
base
relativePath
relativeDirectory
childImageSharp {
gatsbyImageData
}
}
}
}
}
`)
return (
<HeroContainer>
<HeroBg>
{data.allFile.edges.map(({node}) => {
console.log(node);
return <p key={node.id}>
{node.base}
</p>
})}
</HeroBg>
</HeroContainer>
export default Hero;
In this case, Hero
is not receiving any data
props
and the data is fetched in the runtime, as the code requests it.在这种情况下,
Hero
没有收到任何data
props
,并且数据是在运行时获取的,因为代码请求它。
I tried both.我都试过了。 With the second solution which seemed better to me I received this error below:
使用对我来说似乎更好的第二个解决方案,我收到了以下错误:
Error in function Hero in./src/components/Hero.js:29 function Hero in./src/components/Hero.js:29 错误
Cannot read properties of undefined (reading 'edges')无法读取未定义的属性(读取“边缘”)
./src/components/Hero.js:29 ./src/components/Hero.js:29
27 | <HeroContainer> 28 | <HeroBg> > 29 | {data.allFile.edges.map(({node}) => { | ^ 30 | return 31 | <p key={node.id}> 32 | {node.base}
Okay, I found the solution.好的,我找到了解决方案。 It does not use GraphQL in fact, but I achieved what I wanted to that is a background image in the Hero section.
它实际上并没有使用 GraphQL,但我实现了我想要的,即英雄部分的背景图像。 The code is below:
代码如下:
import React from 'react' import styled from "styled-components" import { StaticImage } from 'gatsby-plugin-image' const Hero = () => { return ( <HeroContainer> <HeroBg> <StaticImage src="../images/Image.jpeg" /> </HeroBg> </HeroContainer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.