如何查询富文本中的图像

如何解决如何查询富文本中的图像

我试图在 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\",\"value\":\"\",\"data\":{}}]}",

解决方法

您的查询应如下所示：

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，您需要一堆额外的字段，如上面代码片段中的字段。如果您使用标准的 <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/

,

您的查询是正确的，我只想添加 __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，它对我有用。请记住，您需要更新版本的软件包，尤其是源内容。祝你好运:)