3

有一个gatsby 博客，我在其中添加了一个封面图像，该图像可以是图像（我希望它显示为 Gatsby 图像）或 mp4（我希望它显示为 html5 视频）。

问题是，当我查询这个字段时（在我的降价帖子中，cover: x.mp4或者cover: x.jpg），如果它是一个 mp4 并且它没有childImageSharp（错误：）的属性TypeError: Cannot read property 'fluid' of null。

我的查询如下所示：

  frontmatter {
    date(formatString: "YYYY")
    title
    cover {
      childImageSharp {
        fluid(maxWidth: 900) {
          ...GatsbyImageSharpFluid_noBase64
          ...GatsbyImageSharpFluidLimitPresentationSize
        }
      }
    }
  }

所以我的目标是拥有某种 JSX，例如：

{post.frontmatter.cover.childImageSharp && (
  <Img fluid={post.frontmatter.cover.childImageSharp.fluid} />
)}
{post.frontmatter.cover.childImageSharp ? '' : (
  <video src={post.frontmatter.cover} />
)}

有任何想法吗？

4

2 回答 2

2

问题是，当我查询此字段时（在我的降价帖子中，封面：x.mp4 或封面：x.jpg），如果它是 mp4 并且它没有 childImageSharp 的属性（错误：TypeError：无法读取属性'流体'为空）。

该cover字段将是一个文件节点，因此您将无法直接从中获取视频 src。如果您只想访问 mp4 文件（放在视频标签内），您可以查询它publicURL：

  frontmatter {
    date(formatString: "YYYY")
    title
    cover {
      extension
      publicURL

      childImageSharp {
        fluid(maxWidth: 900) {
          ...GatsbyImageSharpFluid_noBase64
          ...GatsbyImageSharpFluidLimitPresentationSize
        }
      }
    }
  }

然后在您的组件中：

{cover.extension === 'mp4'
  ? <video src={cover.publicURL} />
  : <Img fluid={cover.childImageSharp.fluid} />
)}
于 2020-05-22T04:39:08.553 回答
1

为什么不混合两种方法？

{post.frontmatter.cover.childImageSharp ? <Img fluid={post.frontmatter.cover.childImageSharp.fluid} /> : <video src={post.frontmatter.cover} />}

不管你将如何管理它，我认为你的想法是实现你想要的一个好方法。您将根据查询呈现一个或另一个组件，因此它既高效又干净。

于 2020-05-21T14:33:26.190 回答