如何解决盖茨比内容丰富的嵌入图像
正如我所见,在仅原始查询 contentfulBlogPost 时,不再有 json 选项。我能够进行一些更改以获取正文中的所有内容,但该帖子中的图片除外。
如果我在 GraphQL Playground 中进行测试,我可以获得图像 id 和 url,仅此而已。
animal
我试图找到一个如何获取嵌入图像的示例,但没有运气....
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
解决方法
使用类似:
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/
return
条目中的 BLOCKS.EMBEDDED_ASSET
语句将包含您的数据,适应您的需求。如果您进入依赖项,您将看到所有公开的方法,因此您还将有一个 BLOCKS.EMBEDDED_ENTRY
条目用于嵌入条目。像这样应用它:
[BLOCKS.EMBEDDED_ENTRY]: node => {
// your logic to manipulate the entry here
return (
<>
<div>whatever</div>
</>
)
},
,
嗨,我在 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} />
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。