盖茨比内容丰富的嵌入图像

Posted 2023-03-08

【中文标题】盖茨比内容丰富的嵌入图像

【英文标题】：Gatsby Contentful embedded image

【发布时间】：2021-04-25 23:32:42

【问题描述】：

正如我所见，在仅原始查询 contentfulBlogPost 时不再有 json 选项。我能够进行一些更改以获取正文中的所有内容，但该帖子中的图像除外。

如果我在 GraphQL Playground 中进行了测试，我可以获得图像 id 和 url，仅此而已。

query 
  allContentfulAsset 
    edges 
      node 
        id
        file 
          url
        
      
    
  

我试图找到一个如何获取嵌入图像的示例，但没有运气......

import React from 'react'
import  graphql  from 'gatsby'
import  documentToReactComponents  from '@contentful/rich-text-react-renderer'

import Layout from '../components/layout'


export const query = graphql`
  query($slug: String!) 
    contentfulBlogPost(slug: eq: $slug) 
      title
      publishedDate(formatString: "MMMM Do, YYYY")
      body 
        raw 
      
    
    allContentfulAsset 
      edges 
        node 
          id
          file 
            url
          
        
      
    
  
`

const Blog = (props) => 
  const options = 
    renderNode: 
      "embedded-asset-block": (node) => 
        const alt = node.data.title
        const url = node.file.url
        return <img alt=alt src=url/>
      
    
  
  return (
        <Layout>
          <h1>props.data.contentfulBlogPost.title</h1>
          <p>props.data.contentfulBlogPost.publishedDate</p>
          documentToReactComponents(JSON.parse(props.data.contentfulBlogPost.body.raw, options))
        </Layout>
    )


export default Blog

插件：

...
 'gatsby-plugin-sharp',
    
      resolve:   'gatsby-transformer-remark',
      options: 
        plugins: [
          'gatsby-remark-relative-images',
          
            resolve: 'gatsby-remark-images-contentful',
            options: 
              maxWidth: 750,
              linkImagesToOriginal: false
            
          
        ]
      

    
  ],

【参考方案1】：

您好，我在 Youtube 评论中看到了这个解决方案。您要做的第一件事是将 Graphql 查询更改为如下内容：

    query ($slug: String!) 
      contentfulBlogPost(slug: eq: $slug) 
         id
         title
         publishedDate(formatString: "MMMM Do, YYYY")
         body 
            raw
            references 
               ... on ContentfulAsset 
                  contentful_id
                  title
                  file 
                     url
                  
               
            
         
      
   

然后将您的 options 常量更改为：

    const options = 
      renderNode: 
         [BLOCKS.EMBEDDED_ASSET]: node => 
            console.log(node);
            const imageID = node.data.target.sys.id;
            const 
               file: url, 
               title
             = props.data.contentfulBlogPost.body.references.find((contentful_id: id) => id === imageID);

            return <img src=url alt=title />
         
      
   

【参考方案2】：

使用类似的东西：

import  BLOCKS, MARKS  from "@contentful/rich-text-types"
import  renderRichText  from "gatsby-source-contentful/rich-text"
​
const Bold = ( children ) => <span className="bold">children</span>
const Text = ( children ) => <p className="align-center">children</p>
​
const options = 
  renderMark: 
    [MARKS.BOLD]: text => <Bold>text</Bold>,
  ,
  renderNode: 
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>children</Text>,
    [BLOCKS.EMBEDDED_ASSET]: node => 
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>JSON.stringify(node, null, 2)</code>
          </pre>
        </>
      )
    ,
  ,

​
renderRichText(node.bodyRichText, options)

来源：https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/

BLOCKS.EMBEDDED_ASSET 条目中的return 语句将包含您的数据，以适应您的需求。如果您进入依赖项，您将看到所有公开的方法，因此您还将有一个 BLOCKS.EMBEDDED_ENTRY 用于嵌入条目的条目。像这样应用它：

[BLOCKS.EMBEDDED_ENTRY]: node => 
  // your logic to manipulate the entry here
  return (
    <>
      <div>whatever</div>
    </>
  )
,

【参考方案3】：

对于仍在努力在 graphql 中查找“引用”字段的任何人，请记住，您必须首先通过添加至少一个图像来创建内容条目。否则，引用字段将不会显示在graphql中，因此您无法查询它。