Gatsbyjs + Directus 如何从内容中获取图像？

Question

我连接了 gatsby 和 directus。一切正常，但是...

我在 directus 中有 html 名称为“content”的文本字段，里面有图像。我如何在 gatsby 中获取它们？

Answer 1

如果您想在原始 HTML (content) 中显示您的图像，您将需要使用 dangerouslySetInnerHTML 或使用降价解析器。 imageFile节点可以单独打印出来

您只需要使用 page query 来获取您的数据，例如：

import * as React from 'react'
import { graphql } from 'gatsby'
import Markdown from 'markdown-to-jsx';

 const HomePage = ({data}) => {
  console.log("Your data is", data);

  return (
    <div>
    Your image is: <img src={data.article.image.imageFile.publicURL} alt="" />
    Your content is:
    <Markdown>{data.article.content}</Markdown>
    </div>
  )
}

export const query = graphql`
  query directus{
    article {
       id
       title
       description
       content
       image {
        imageFile {
          publicURL
        }
      }
    }
  }
`

export default HomePage

注意：我的查询基于您的 GraphQL 架构，调整它以适应您的架构。

您查询的数据存储在props.data中（在本例中解构为data），那么您只需在每种情况下获取所需的节点即可。对于您的图片，您需要不断嵌套对象，直到到达 publicURL.

剩下的内容，我用了markdown-to-jsx库，用起来很简单，不过你可以省略，直接用dangerouslySetInnerHTML或其他库

Answer 2

我解决问题如下：

我在名为“imagelist”的文章中的 Directus 中创建了一个 multiplefiles 字段，其中指示了我在文章中使用的相同图像。
现在 gatsby 在 GraphQL 中给我一组图像。
为图像写了一个 CustomImage 组件，我在其中检查 id。
使用 overrides 选项替换 Markdown 组件中的 img 标记。

所以，我的代码看起来是这样的：

布局道具：

interface ArticleImage {
  directus_files_id: {
    id: string;
    imageFile: IGatsbyImageData;
  }
}

interface BlogLayoutProps {
  title: string;
  annotation: string;
  imageData: IGatsbyImageData;
  allImages: Array<ArticleImage>;
  content: string;
}

自定义图像组件：

const CustomImage = (props) => {

    const { alt, width, height, src } = props;
    const image = allImages.find(i => src.indexOf(i.directus_files_id.id) !== -1);

    if (image) {
      const imgData = getImage(image.directus_files_id.imageFile);
      imgData.width = +width;
      imgData.height = +height;
      return <GatsbyImage image={imgData} alt={alt}/>;
    }

    return <img src={src} width={width} height={height} alt={alt} />
  };

在布局组件中：

<StyledContent>
      <Markdown
        options={{
          overrides: {
            img: {
              component: CustomImage,
            }
          }
        }}
      >
        {content}
      </Markdown>
    </StyledContent>

页面查询:

query MyQuery {
  directus {
    article_by_id(id: "26434049-7bb4-46d3-8ad1-c04973b9cf71") {
      id
      category {
        id
        title
      }
      title
      description
      content
      image {
        id
        width
        height
        imageFile {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
      imagelist {
        directus_files_id {
          id
          imageFile {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }
}

希望有人能帮我解答或推他出新思路！

Gatsbyjs + Directus 如何从内容中获取图像？

Gatsbyjs + Directus how to get image from content?

graphql

gatsby

directus

gatsby-image

ssg