Gatsby-Image失败道具类型

Imlastrebor

我尝试将WP帖子的精选图片发布到网站上。我按照教程进行操作,现在可以在网站上看到特色图片,但是我也收到此警告:

index.js:2177 Warning: Failed prop type: Invalid prop `fixed` supplied to `Image`.
    in Image (at BlogPost.js:17)
    in BlogPostTemplate (created by HotExportedBlogPostTemplate)
    in AppContainer (created by HotExportedBlogPostTemplate)
    in HotExportedBlogPostTemplate (created by PageRenderer)
    in PageRenderer (at json-store.js:93)
    in JSONStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:127)
    in _default (at app.js:65)

BlogPost.js文件:

// src/templates/BlogPostTemplate.js
import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import SEO from "../components/seo"
const BlogPostTemplate = ({ data }) => (
  <Layout>
    <SEO
      title={data.wordpressPost.title}
      description={data.wordpressPost.excerpt}
    />
    <h1>{data.wordpressPost.title}</h1>
    <p>
      Written by {data.wordpressPost.author.name} on {data.wordpressPost.date}
    </p>
    <Img
      fixed={data.wordpressPost.featured_media.localFile.childImageSharp.fixed}
      alt={data.wordpressPost.title}
      style={{ maxHeight: 450 }}
    />
    <div
      style={{ marginTop: 20 }}
      dangerouslySetInnerHTML={{ __html: data.wordpressPost.content }}
    />
  </Layout>
)
export default BlogPostTemplate
export const query = graphql`
  query($id: Int!) {
    wordpressPost(wordpress_id: { eq: $id }) {
      title
      content
      excerpt
      date(formatString: "MMMM DD, YYYY")
      author {
        name
      }
      acf {
        work_name
      }
      featured_media {
        localFile {
          childImageSharp {
            fixed(width: 300, height: 300) {
              src
              width
              height
            }
          }
        }
      }
    }
  }
`

gatsby-config.js文件:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "http://localhost:8888/GatsbyWP/",
        protocol: "http",
        hostingWPCOM: false,
        useACF: true,
        acfOptionPageIds: [],
        verboseOutput: false,
        perPage: 100,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost:8888/GatsbyWP/",
          replacementUrl: "https://localhost:8001",
        },
        concurrentRequests: 10,
        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
          "**/*/*/menus",
          "**/*/*/menu-locations",
        ],
        excludedRoutes: [],
        normalizer: function({ entities }) {
          return entities
        },
      },
    },
    `gatsby-plugin-sitemap`,
  ],
}

我搜索了此类问题,看来这并不常见。希望这里有人可以帮助您。提前致谢!

Imlastrebor

我从这里得到了这个问题的答案我用错查询了。它需要像这样:

childImageSharp {
    fixed(width: 300, height: 300) {
        ...GatsbyImageSharpFixed
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在 Gatsby 中使用 Graphql 和 Contentful 时图像不显示,失败的道具类型:无效的道具“图像”类型为“数字”,预期为“对象”?

Gatsby组件道具CSS模块

gatsby-image 获取组件中未定义的道具

Gatsby-plugin-image:更新 Gatsby 客戶端后缺少圖像道具

Gatsby网站的Netlify构建失败

Gatsby graphql 跳过类型注释

Gatsby 构建失败 google-fonts

location.state与gatsby构建失败

Gatsby Build在Netlify Deploy上失败

导入嵌套的SCSS模块失败(Gatsby)

Netlify部署在Gatsby构建上失败

gatsby-image:childImageSharp与imageSharp之间的区别

gatsby-image:设置图像处理管道

Gatsby Develop失败:错误:找不到模块“ gatsby-cli / lib / reporter”

将mapbox-gl-geocoder添加到gatsby.js时,gatsby构建失败

gatsby-image-background 使用 v3 gatsby-image

将链接作为道具传递给 Gatsby Link 时出错

在Gatsby上,如何使用道具进行GraphQL查询?

如何使Gatsby Link接收道具作为参数并关闭点击光标

在 Gatsby Helmet 中使用 Location 道具时出错

你如何在 Netlify 上发布带有 gatsby-image 的 gatsby 项目?

在Netlify上调试失败的Gatsby(无法解析组件)

netlify 部署构建对于 gatsby-contentful 站点失败

克隆git存储库时,gatsby开发失败

在 github 页面上部署后 Gatsby 链接失败

gatsby-transformer-remark的自定义YAML类型

Gatsby - 未捕获的类型错误 - 上下文/构建问题

gatsby graphql 无法在“查询”类型上查询字段“allTribeEvents”

Gatsby构建生产类型未定义的错误