如何解决Gatsby Source Contentful 4.x - 富文本 - 无法获取图像和超链接
我有一个 gatsby 应用程序,我使用内容丰富的富文本。 contentful 最近对现在获取内容的方式进行了一些重大更改,我对如何从原始富文本文件中获取链接和图像感到非常迷茫。
以下是我目前所拥有的代码,我通过这些代码获取富文本。我看到了
标签和 s 以及所有内容,但是当我控制台记录带回节点的嵌入式资产块和超链接的内容时,什么都没有。
import React from 'react';
import { graphql,Link } from 'gatsby';
import Img from 'gatsby-image';
import { renderRichText } from 'gatsby-source-contentful/rich-text';
import { BLOCKS,MARKS,INLInes } from '@contentful/rich-text-types';
const Bold = ({ children }) => <span className="bold">{children}</span>;
const Text = ({ children }) => <p className="align-center">{children}</p>;
// Setting the rendering options. Same as:
// https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer
const options = {
renderMark: {
[MARKS.BOLD]: (text) => <Bold>{text}</Bold>
},renderNode: {
[INLInes.ENTRY_HYPERLINK]: ({ data }) => <Link to="/">{console.log(data)}</Link>,[BLOCKS.ParaGRAPH]: (node,children) => <Text>{children}</Text>,[BLOCKS.EMbedDED_ASSET]: (node) => {
console.log(node);
}
}
};
function privacy({ data }) {
// console.log(data);
const description = data.allContentfulBlogPost.nodes[0].bodyRichText;
return <div>{description && renderRichText(description,options)}</div>;
}
export default privacy;
export const pageQuery = graphql`
query MyQuery {
allContentfulBlogPost {
nodes {
bodyRichText {
raw
references {
... on ContentfulAsset {
# contentful_id is required to resolve the references
contentful_id
fluid(maxWidth: 600) {
...GatsbyContentfulFluid_withWebp
}
}
}
}
}
}
}
`;
有人可以帮忙吗?
解决方法
好的,我发现了问题。我在引用中添加了以下内容,现在我可以看到资产
... on ContentfulAsset {
contentful_id
__typename
fixed(width: 1600) {
width
height
src
srcSet
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。