问题描述
我有使用netlifyCMS的gatsby网站。我有一个可选的图像字段,但是当然会失败,并显示“ childImageSharp为null”错误,因为我已经指定了它并且正在寻找它。
这是我尝试三进制之前的文件:
import React from "react"
import { Link,graphql,useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
import Img from "gatsby-image"
import TriangleThree from "../../assets/trianglethree.svg"
const Services = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(
sort: { order: DESC,fields: [frontmatter___date] }
filter: { frontmatter: { template: { eq: "service" } } }
) {
edges {
node {
excerpt
frontmatter {
service
template
title
date(formatString: "MMMM DD,YYYY")
serviceCountryImg {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="services old-page">
<h1 className="services__title">Streaming Services</h1>
<div style={{ width: 200 }}></div>
<section className="services__thumbnails">
<div className="services__thumbnails-container">
{data.allMarkdownRemark.edges.map(edge => {
return (
<Link
to={`/streaming-services${edge.node.fields.slug}`}
className="services__thumbnails-item"
data-country="United States"
data-requirements="Requires Subscription"
>
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<figure className="services__thumbnails-artwork">
<Img
fluid={
edge.node.frontmatter.image.childImageSharp
.fluid
}
/>
</figure>
<h2 className="services__thumbnails-name">
{edge.node.frontmatter.service}
</h2>
<Img fixed={edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed} /> -OPTIONAL IMAGE
</div>
</div>
</Link>
)
})}
<div className="services__thumbnails-item is-request">
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<TriangleThree />
<h3 className="services__thumbnails-request">
Request a service
</h3>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</Layout>
</>
)
}
export default Services
然后这是我尝试过的操作,但失败了,“ serviceCountryImg未定义”
import React from "react"
import { Link,YYYY")
serviceCountryImg {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="services old-page">
<h1 className="services__title">Streaming Services</h1>
<div style={{ width: 200 }}></div>
<section className="services__thumbnails">
<div className="services__thumbnails-container">
{data.allMarkdownRemark.edges.map(edge => {
return (
<Link
to={`/streaming-services${edge.node.fields.slug}`}
className="services__thumbnails-item"
data-country="United States"
data-requirements="Requires Subscription"
>
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<figure className="services__thumbnails-artwork">
<Img
fluid={
edge.node.frontmatter.image.childImageSharp
.fluid
}
/>
</figure>
<h2 className="services__thumbnails-name">
{edge.node.frontmatter.service}
</h2>
{serviceCountryImg ? (
<Img
fixed={
edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed
}
/>
) : (
""
)}
</div>
</div>
</Link>
)
})}
<div className="services__thumbnails-item is-request">
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<TriangleThree />
<h3 className="services__thumbnails-request">
Request a service
</h3>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</Layout>
</>
)
}
export default Services
我尝试了几种不同的方法,但是没有运气。有人知道该怎么做吗?
谢谢!
解决方法
只是:
{serviceCountryImg && <Img fixed={edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed}/>}
您不需要使用三元条件来返回空值或null
。您可以使用&&
运算符。