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

Posted 2023-03-08

【中文标题】Gatsby / Drupal8 解耦：如何在从 Drupal 文件目录中提取的 Gatsby 页面上呈现图像？

【英文标题】：Gatsby / Drupal8 decouple: How do I render an image on a Gatsby page that pulls from a Drupal file directory?

【发布时间】：2019-05-18 04:27:40

【问题描述】：

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

我可以使用 GraphQL 查询很好地呈现默认的 Drupal 8 文章节点信息。我无法获取要呈现的默认图像字段 (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
            
          
        
       
    
  

  `

我做错了什么？

【问题讨论】：

node.relationships.field_image.uri.url 是一个有效的网址吗？例如，您可以将其用作<img> 的 href 属性吗？

感谢您的评论。 node.relationships.field_image.uri.url 给了我这个/sites/default/files/images/photo1.jpg 这是正确的。我需要以某种方式在它前面加上../path-to-my-drupal-site 才能正确提取图像，但我在gatsby-config.js 中设置了路径，所以我仍然认为我只是没有通过 GraphQL 正确访问它......？

【参考方案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
        
    />

【讨论】：

感谢您的回复@jmolivas。我正在踏上这段旅程，很大程度上是基于你今年在 BadCamp 上的演讲。我在 GraphQL 中没有这些选项可供我使用。我不能从field_image 开始，如果我向下钻取allNodeArticle/edges/node/relationships/field_image，那么我唯一的选择是node__article，而不是field_media_image? I wonder if I don't have a required dependency? I'm on the Gatsby Starter Default and using gatsby-image`？再次感谢您的回复。

对不起，我在上面的评论中弄错了反引号。我现在无法编辑... =/

@TristanTheKnightAway 我计划下周发布 Drupal 发行版和 Gatsby 入门版，请保持联系。

@TristanTheKnightAway 您使用的是核心媒体模块还是贡献者？

@TristanTheKnightAway 请注意此 GraphQL 片段 GatsbyImageSharpFluid 将无法在 GraphiQL 工具上运行。