我正在通过使用Contentful作为CRM建立博客来学习Gatsby,并且我不确定如何将其与gatsby-images一起使用,以将图像显示到富文本字段的正文中,一直在搜索互联网,没有找到一个很好的例子。
我的post.jsx:
import React from 'react';
import { graphql } from 'gatsby';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import Layout from '../components/layout';
import Image from '../components/image';
const renderBody = documentToReactComponents;
export const query = graphql`
query($slug: String) {
contentfulBlogPost(slug: { eq: $slug }) {
title
author
date(formatString: "DD-MM-YYYY")
/** body is my rich-text field*/
body {
json
}
}
}`;
const Post = ({ data }) => {
const {
title,
author,
date,
body: { json },
} = data.contentfulBlogPost;
const options = {
renderNode: {
'embedded-asset-block': (node) => {
console.log(`Node: ${JSON.stringify(node, undefined, 2)}`);
/** It works with no problems when using a simple img html tag */
const src = node.data.target.fields.file['en-US'].url;
const imageAlt = node.data.target.fields.file['en-US'].title;
return (
<Image alt={imageAlt} fluid={???}/>
);
},
},
};
return (
<Layout>
<article>
<h1>{title}</h1>
<p>Author: {author}</p>
<p>Date: {date}</p>
{ renderBody(json, options) }
</article>
</Layout>
);
};
export default Post;
我已经在GraphiQL上玩了整整一天,但仍然没有弄清楚在哪里以及如何使用GatsbyContentfulFluid以及插件页面中所述的RTF文本字段。
答案 0 :(得分:0)
我在downloadLocal: true
中使用Gatsby-config.js
对图像进行了排序:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
// Learn about environment variables: https://gatsby.dev/env-vars
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
downloadLocal: true,
},
},
这导致Gatsby在body { json }
返回的JSON中暴露了一堆先前未获取的额外属性。
我还没有使用流体,但是这个线程上的人是: