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

Question

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

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

Answer 1

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

您只需要使用页面查询来获取您的数据，例如：

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

我解决了如下问题：

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

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

布局道具：

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
            }
          }
        }
      }
    }
  }
}

我希望有人能帮助我的解决方案或推动他产生新的想法！