您不能将 childImageSharp 与

Question

自从我更新了我的 gatsby 依赖项后，我在构建过程中收到了“childImageSharp”错误：

You can't use childImageSharp together with 2021-06-10-test.md.md — use publicURL instead. The childImageSharp portion of the query in this file will return null:
undefined

所以我的组件如下所示：

//src/components/PostCover/index.jsx

import React, { Component } from "react";
import { StaticQuery, graphql } from "gatsby";
import PostCover from "./PostCoverComponent";

class queryWrapper extends Component {
  render() {
    const { postNode, coverHeight, coverClassName } = this.props;
    return (
      <StaticQuery
        query={graphql`
          query CoverQuery {
            allFile {
              edges {
                node {
                  id
                  absolutePath
                  childImageSharp {
                    id
                    resolutions {
                      base64
                      tracedSVG
                      aspectRatio
                      width
                      height
                      src
                      srcSet
                      srcWebp
                      srcSetWebp
                      originalName
                    }
                    internal {
                      contentDigest
                      type
                      owner
                    }
                    fluid(maxWidth: 1240) {
                      ...GatsbyImageSharpFluid
                      originalName
                    }
                  }
                }
              }
            }
          }
        `}
        render={data => (
          <PostCover
            fileEdges={data.allFile.edges}
            postNode={postNode}
            coverHeight={coverHeight}
            coverClassName={coverClassName}
          />
        )}
      />
    );
  }
}

export default queryWrapper;

// src/components/PostCover/PostCoverComponent.jsx

import React, { Component } from "react";
import Img from "gatsby-image";
import path from "path";
import "./PostCover.scss";

class PostCover extends Component {
  render() {
    const { fileEdges, postNode, coverHeight, coverClassName } = this.props;
    const post = postNode.frontmatter ? postNode.frontmatter : postNode;
    const coverNodeList = fileEdges.filter(fileNode => {
      if (fileNode.node.childImageSharp === null) return false;

      if (
        fileNode.node.absolutePath.indexOf(
          path.join("/static/assets/", post.cover)
        ) !== -1
      )
        return true;

      if (fileNode.node.absolutePath.indexOf(path.join("/", post.cover)) !== -1)
        return true;

      return false;
    });

    if (coverNodeList.length === 1) {
      return (
        <Img
          fluid={coverNodeList[0].node.childImageSharp.fluid}
          outerWrapperClassName={coverClassName}
          style={{ height: coverHeight, width: "100%" }}
        />
      );
    }

    /* eslint no-undef: "off" */
    const coverURL =
      post.cover.substring(0, 1) === "/"
        ? __PATH_PREFIX__ + post.cover
        : post.cover;
    return (
      <div
        style={{
          backgroundImage: `url(${coverURL})`,
          height: `${coverHeight}px`
        }}
        className={coverClassName}
      />
    );
  }
}

export default PostCover;

在我的 gatsby-config.js 中我已经正确设置了路径

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "assets",
        path: `${__dirname}/static/assets/`
      }
    },

一个示例 md 文件是这样生成的：

---
title: test
date: 2021-06-10T00:05:22.590Z
cover: assets/clouds.jpg
slug: test
category: blah
tags:
  - bli
---
blub

我的 package.json 中有

"gatsby-transformer-sharp": "^2.5.3"

我希望这些信息足以提示发生了什么变化以及我现在需要修复什么。我有整个仓库这里。如果有人能指出哪里出了问题，我将非常感激。正如我所说，我使用时没有这个问题

"gatsby-transformer-sharp": "^2.1.19"

Answer 1

我也遇到了类似的问题，但使用的是

svg

文件而不是

md

。在你的 graphQL 查询中，你正在浏览所有文件，我猜你的目的是获取

childImageSharp

图像文件。出现警告是因为并非您查询的所有文件都有

childImageSharp

，markdown 文件没有它。

查看您的代码，在 graphQL 查询中您似乎只对图像文件感兴趣，因此您可以通过扩展名过滤出

.md

文件：

        query={graphql`
          query CoverQuery {
            allFile(filter: {extension: {ne: "md"}}) {
              edges {
                node {
                  id
                  absolutePath
                  childImageSharp {
                    id
                    resolutions {
                      base64
                      tracedSVG
                      aspectRatio
                      width
                      height
                      src
                      srcSet
                      srcWebp
                      srcSetWebp
                      originalName
                    }
                    internal {
                      contentDigest
                      type
                      owner
                    }
                    fluid(maxWidth: 1240) {
                      ...GatsbyImageSharpFluid
                      originalName
                    }
                  }
                }
              }
            }
          }
        `}

Answer 2

childImageSharp

使用Sharp图像库，该库以前不支持SVG和GIF（尽管在最近的版本中似乎支持）。

它也不支持 Markdown 文件。尝试处理这些文件类型将导致您看到警告。

PublicURL

将不存在，因为尚未处理任何图像以提供图像。