Как сделать запрос на изображение в поле расширенного текста в Contentful - PullRequest
Новая
       16

Как сделать запрос на изображение в поле расширенного текста в Contentful

2 голосов
/ 09 мая 2019

Я изучаю Гэтсби, создавая блог с использованием Contentful в качестве CRM, и я сомневаюсь, как использовать его вместе с изображениями gatsby для отображения изображений в теле поля с расширенным текстом, искал в Интернете и до сих порне нашел хорошего примера того, как это сделать.

Мой 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 по крайней мере целый день и до сих порt выяснил, где и как использовать GatsbyContentfulFluid вместе с полем расширенного текста, как описано на странице плагина.

...