Graphql 如何在富文本中查询图像

我试图在内容丰富的文本字段中查询图像。我的查询应该是什么样的？我的问题是：

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
          }
        }
      }
    }
  }
}

              "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\":{}}]}",

} }

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

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} />
  }
}

---

您的查询应该如下所示：

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

。更多详情：

如果您使用的是

gatsby image

，则需要一组与上面代码片段中的字段类似的附加字段。如果您使用的是图像的标准

）

此时，您需要使用以下内容：

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)

)
},
[BLOCKS.EMBEDDED_ENTRY]：节点=>{
log（“嵌入式条目”，节点）
返回(
嵌入式条目
{/*使用盖茨比图像*/}
)
},  
},
}
renderRichText（node.bodyRichText，选项）

我假设嵌套结构（

node.target.sys.id.references.fixed

）是正确的，如果不正确，请尝试调试，从

节点开始，使用
控制台.logs
作为支持

有用资源：



您的查询是正确的，我只需添加
\uuuuTypeName
，因此它看起来如下所示：

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

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

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

创建选项对象：

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

这来自于这个例子，它对我很有用。请记住，您需要更新包的版本，尤其是源代码内容。祝你好运：）
我没有使用盖茨比图像插件。此代码。。。关于ContentfulBlogPost{contentful_id title slug}}给了我这个错误片段不能在这里传播，因为类型为“ContentfulAsset”的对象永远不能是类型\“ContentfulBlogPost\”“使用
localhost:8000/\uuuuuuuu图形ql
playway来定义最终查询，否则就无法猜测数据结构。你应该知道答案，那就是根据你的需要调整这种方法。使用图像的
src
（应用有效查询）并将其添加到
[BLOCKS.EMBEDDED\u ENTRY]
节点中。请记住，片段在
localhost:8000/\uuuuuuu图形ql
中无效，但它们可以在查询中使用。
<div className="container">
   {renderRichText(body, options)}
</div>