Gatsby-图像道具类型失败 [英] Gatsby-Image failed prop type
本文介绍了Gatsby-图像道具类型失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试着让我的可湿性粉剂帖子的特色图片发布到网站上。我遵循了this教程,现在我可以在网站上看到特色图片,但我也收到了这样的警告:
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`,
],
}
我搜索了这类问题,似乎这并不常见。希望在这里有人能帮上忙。 提前感谢!
推荐答案
我从here得到这个问题的答案。我错误地使用了查询。它需要如下所示:
childImageSharp {
fixed(width: 300, height: 300) {
...GatsbyImageSharpFixed
}
}
这篇关于Gatsby-图像道具类型失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文