如何查询富文本中的图像

Question

我正在尝试在 Contentful 的富文本字段中查询图像。我的查询应该是什么样的？这是我的查询：

query {allContentfulBlogPost (
sort: {
  fields: publishedDate,
  order: DESC
}){
edges {
  node {
    title
    slug
    publishedDate(formatString: "MMMM Do, YYYY")
    body {
      raw
      references {
        ... on ContentfulAsset {
          contentful_id
          fixed(width: 1600) {
            width
            height
            src
            srcSet
          }
        }
      }
    }
  }
}

} }

这是我编辑器中的代码。图像不会显示。

const Blog = (props) => { const options = {
renderNode: {
  "embedded-asset-block": (node) => {
    const alt = node.data.target.fields.title["en-US"]
    const url = node.target.sys.id.references.fixed.src
    return <img alt={alt} src={url} />
  }
}

} 这是我查询的原始数据响应：

              "raw": "{\"nodeType\":\"document\",\"data\":{},\"content\":[{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"Here is a recipe for chewy chocolate chip cookies.\",\"marks\":[],\"data\":{}}],\"data\":{}},{\"nodeType\":\"embedded-asset-block\",\"content\":[],\"data\":{\"target\":{\"sys\":{\"id\":\"3eIIsGhe0e1my0IRJtstRp\",\"type\":\"Link\",\"linkType\":\"Asset\"}}}},{\"nodeType\":\"paragraph\",\"content\":[{\"nodeType\":\"text\",\"value\":\"\",\"marks\":[],\"data\":{}}],\"data\":{}}]}",

Answer 1

您的查询应如下所示：

query {
  allContentfulBlogPost {
    edges {
      node {
        bodyRichText {
          raw
          references {
            ... on ContentfulAsset {
              contentful_id
              fixed(width: 1600) {
                width
                height
                src
                srcSet
              }
            }
            ... on ContentfulBlogPost {
              contentful_id
              title
              slug
            }
          }
        }
      }
    }
  }
}

注意：

  fixed(width: 1600) {
    width
    height
    src
    srcSet
  }

注意：另外，您可以使用公开的 GraphQL 片段之一，例如 ...GatsbyContentfulFixed。更多详情：https://www.gatsbyjs.com/plugins/gatsby-image/

如果你使用gatsby-image，你需要一堆额外的字段，就像上面sn-p中的字段一样。如果您使用的是标准的<img> 标签，您只需要图像的来源 (src)。

此时，您需要使用类似：

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 => {
      console.log("embedded asset",node)
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node, null, 2)}</code>
          </pre>
        </>
      )
    },
    [BLOCKS.EMBEDDED_ENTRY]: node => {
      console.log("embedded entry",node)
      return (
        <>
          <h2>Embedded Entry</h2>
          {/* Using gatsby-image */}
          <Img fixed={node.target.sys.id.references.fixed}  />
          {/* Using img */}
          <img src={node.target.sys.id.references.fixed.src} />
        </>
      )
    },  
  },
}

renderRichText(node.bodyRichText, options)

我假设嵌套结构 (node.target.sys.id.references.fixed) 是正确的，如果不正确，请尝试调试，从 node 开始，使用 console.logs 作为支持。

有用的资源：

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

Answer 2

您的查询是正确的，我将添加__typename，所以它看起来像这样：

      body {
        raw
        references {
          ... on ContentfulAsset {
            contentful_id
            fluid(maxWidth: 600) {
              ...GatsbyContentfulFluid_withWebp
            }
            __typename
          }
        }
      }

然后从 gatsby-source-contentful 导入 renderRichText 函数，以及从富文本类型导入 BLOCKS：

import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS } from "@contentful/rich-text-types"

创建你的选项对象：

  const options = {
    renderNode: {
      [BLOCKS.EMBEDDED_ASSET]: node => <Img {...node.data.target} />,
    },
  }

最后，像这样在你的 JSX 中使用 renderRichText 函数（假设你已经从你的数据中解构了body：

<div className="container">
   {renderRichText(body, options)}
</div>

这来自示例here，它对我有用。请记住，您需要更新版本的软件包，尤其是源内容。祝你好运:)