不能将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

我的"gatsby-transformer-sharp": "^2.5.3"在我的package.json里

我希望这些信息足以给出一些提示，说明已经改变了什么，以及我现在需要修复什么。我有整个回购这里。如果有人能指出出了什么问题，我会非常感激的。正如我说的，我使用"gatsby-transformer-sharp": "^2.1.19"时没有这个问题

Answer 1

我也遇到了类似的问题，但是svg文件而不是md文件。在您的graphQL查询中，您正在遍历所有文件，我猜您的目的是获取childImageSharp图像文件。发出警告的原因是，并不是所有查询的文件都有childImageSharp，而标记文件没有它。

从代码来看，在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
                    }
                  }
                }
              }
            }
          }
        `}