You’re probably like me building a site with Gatsby and Netlify CMS. This issue happens in post-item.js, post.js or index.js with GraphQL. We’re new to the GraphQL queries and wonder why they all query the image like this:
query Post($locale: String!, $title: String!) {
markdownRemark(
frontmatter: { title: { eq: $title } }
fields: { locale: { eq: $locale } }
) {
frontmatter {
title
description
image {
childImageSharp {
fluid(maxWidth: 800) {
...GatsbyImageSharpFluid
}
}
}
}
html
}
}
When you query ‘image’ inside the ‘frontmatter’, it returns a url to you fine. However, you want to use that url with the image sharp plugin and the issue pops out:
Field "image" must not have a selection since type "String"That’s due to Gatsby still think the image is a type “String” and you Google to find the solution but there’s hardly any solution. I spend hours finding solutions, but there’s not a clear answer about how to solve this issue. However, after taking a look at the specific package github README, the problem is solved. Here’s how I do it!
The package is called: gatsby-remark-relative-images
Use it with correct config
In gatsby-config.js, you have to set the source filesystem first for your upload files and pages! Then, set the gatsby-transformer-remark plugin with options plugin inside. Include the gatsby-remark-relative-images before gatsby-remark-images!
Note: The media folder must be included before the other content.
// gatsby-config.js
plugins: [
// Add static assets before markdown files
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/static/uploads`,
name: 'uploads',
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/pages`,
name: 'pages',
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
// gatsby-remark-relative-images must
// go before gatsby-remark-images
{
resolve: `gatsby-remark-relative-images`,
},
{
resolve: `gatsby-remark-images`,
options: {
// It's important to specify the maxWidth (in pixels) of
// the content container as this plugin uses this as the
// base for generating different widths of each image.
maxWidth: 590,
},
},
],
},
},
];One more step to success!
However, this still doesn’t solve our issue. Since we’re using it inside frontmatter, we need to convert the path from string type to image type so that we can have childImageSharp.fluid without issue.
Here you need to edit gatsby-config.js
// gatsby-node.js
const { fmImagesToRelative } = require('gatsby-remark-relative-images');exports.onCreateNode = ({ node }) => {
fmImagesToRelative(node);
};This turns all the image path from string type to image type. However, if do not want to convert all of the nodes, make sure you limit the nodes by using if condition like:
exports.onCreateNode = ({ node }) => {
if (node.internal.type === `MarkdownRemark`) {
fmImagesToRelative(node);
}
};Now, enjoy using the image sharp and markdown for beautiful sites.
I’m using it for my client’s blog with big image hero header like this: https://julies.pro
WRITTEN BY
Andys.Pro 安迪
Coding Meteor, React Native, JS and Python! Feel free to comment and chat about codes!
Andys.Pro TV
Here I’ll share some HTML, JavaScript course and some unboxing