Gatsby / Drupal8 decouple: как сделать изображение на странице Gatsby, которое извлекается из файлового каталога Drupal? - PullRequest
Новая
       13

Gatsby / Drupal8 decouple: как сделать изображение на странице Gatsby, которое извлекается из файлового каталога Drupal?

0 голосов
/ 17 декабря 2018

GOAL: используйте Gatsby для рендеринга изображений Drupal 8, связанных с узлами

Я могу визуализировать информацию об узле Drupal 8 Article по умолчанию, используя запрос GraphQL.Я не могу получить поле изображения по умолчанию для отображения (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
            }
          }
        }
      } 
    }
  }
}
  `

что я делаю не так?

1 Ответ

0 голосов
/ 19 декабря 2018

То, как нам это удается, заключается в том, чтобы на 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
        }
    />
...