Gatsbyjs + Directus how to get image from content? - graphql

Question

I connected gatsby and directus. everything is ok, but...
I have html text field with name "content" in directus, it has images inside. how do i get them in gatsby?

Answer 1

If you want to display your image inside the raw HTML (content) you will need to use dangerouslySetInnerHTML or use a markdown parser. The imageFile node can be isolated and print alone.
You just need to use a page query to fetch your data like:
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
Note: I've based my query in your GraphQL schema, tweak it to adapt it to yours.
Your queried data is stored inside props.data (destructured as data in this case), then you just need to get the needed node in each case. For your image, you need to keep nesting the object until your reach publicURL.
Regarding the rest of the content, I've used markdown-to-jsx library which is quite straightforward to use, but you can omit it and use directly dangerouslySetInnerHTML or another library.

Answer 2

I solved the problem as follows:
I created a multiplefiles field in Directus in the Article named "imagelist" there indicated the same images that I use in the article.
Now gatsby gives me an array of images in GraphQL.
Wrote a CustomImage component for the image, where I check the id.
Used the overrides option to replace the img tag in the Markdown component.
So, my code looks that:
layout props:
interface ArticleImage {
directus_files_id: {
id: string;
imageFile: IGatsbyImageData;
}
}
interface BlogLayoutProps {
title: string;
annotation: string;
imageData: IGatsbyImageData;
allImages: Array<ArticleImage>;
content: string;
}
custom image component:
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} />
};
in layout component:
<StyledContent>
<Markdown
options={{
overrides: {
img: {
component: CustomImage,
}
}
}}
>
{content}
</Markdown>
</StyledContent>
query in page:
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
}
}
}
}
}
}
}
I hope someone will help my solution or push him to new thoughts!