Gatsby/Drupal8解耦:如何在从Drupal文件目录中提取的Gatsby页面上呈现图像

Question

目标：使用Gatsby渲染与节点关联的Drupal 8图像

我可以使用GraphQL查询来呈现默认的Drupal8Article节点信息。我无法获得要渲染的默认图像字段(field_image(——它只是渲染图像的url。所以我几乎做到了，但肯定错过了一些基本的东西。请帮忙？

import React from "react"
import { Link, graphql } from "gatsby"
import Img from "gatsby-image"
const BlogPage = ({data}) => ( 
<div> 
<h1>Know What Grinds My Gears?</h1> 
{ data.allNodeArticle.edges.map(
(
{ node }) => ( 
<div> 
#the next Img line doesn't work (renders nothing)
<Img fluid={ node.relationships.field_image.uri.url } /> 
<h3> { node.title } </h3>
<div dangerouslySetInnerHTML={{ __html: node.body.summary }} />
<Link to= { node.id } >read</Link>
#the next <figure> line doesn't work (renders correct url to image file)
<figure> { node.relationships.field_image.uri.url }</figure>
</div>
)
)
} 
</div> 
) 
export default BlogPage
export const query = graphql`
query allNodeArticle {
allNodeArticle { 
edges { 
node { 
id
title
body { 
value
format
processed
summary
}
relationships {
field_image {
uri {
value
url
}
}
}
} 
}
}
}
`

我做错了什么？

Answer 1

我们管理它的方法是在节点映像的GraphQL上设置：

field_image {
relationships {
field_media_image {
localFile {
publicURL
childImageSharp {
fluid(maxWidth: 520 maxHeight: 520, cropFocus: CENTER) {
...GatsbyImageSharpFluid
}
}
}
}
}
}

然后将其用作

<Img
fluid={
data.nodePage.relationships.field_image.relationships.field_media_image.localFile.childImageSharp.fluid
}
/>