我尝试将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`,
],
}
我搜索了此类问题,看来这并不常见。希望这里有人可以帮助您。提前致谢!
我从这里得到了这个问题的答案。我用错查询了。它需要像这样:
childImageSharp {
fixed(width: 300, height: 300) {
...GatsbyImageSharpFixed
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句