Fails to compile

[ghost]

My site was running perfectly. When I add a new markdown file and an associated template file. Then I add an image inside markdown file my site got broken and I run gatsby clean and gatsby develop then It says fail to compile below is the screenshot. This message I had got earlier as well when I add some image to markdown file and then I had to restart the project by cloning my repo again. But every time why it happens, what's wrong. I would really appreciate if anyone can resolve this issue.

https://prnt.sc/sc059l

Environment (if relevant)

File contents (if changed) No files changed

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

Markdown File

---
templateKey: 'mentoring-page'
path: /mentoring
title: Mentoring
image: /img/e-book.jpg
---
### Microsoft titled Architecting Modern Web Applications with ASP.NET Core and Microsoft Azure
I’ve written an eBook for Microsoft titled Architecting Modern Web Applications with ASP.NET Core and Microsoft Azure. It’s part of the .NET Application Architecture guidance portal on Microsoft.com. The book also includes a sample reference online store application that demonstrates (in a very simple app) some of the principles and patterns described.  

This book intentionally focuses on a monolithic architecture, meaning that the application is deployed as a single unit. There’s an accompanying ebook by Cesar de la Torre that covers building a microservices and containers-based architecture that uses the same online store sample, but built in a different way. Most customers will find the single-deployment approach to be less expensive to create, deploy, and maintain, but the microservices approach is certainly worthwhile for certain high-end applications.

### Need more personal or specific guidance?
I’m working with organizations every day helping them plan and implement their migration to .NET Core and/or the cloud. Some are looking toward microservices and containers, as well. I’ve seen firsthand many pitfalls and false starts. Contact me if your team or organization is planning such moves and you’d like to avoid going down the wrong path. A few hours with me might save your team a few weeks or months.

Template file

import React from 'react'
import PropTypes from 'prop-types'
import { graphql } from 'gatsby'
import Layout from '../components/Layout'
import Content, { HTMLContent } from '../components/Content'
import Sidebar from '../components/sidebar'

export const MentoringPageTemplate = ({ image, title, content, contentComponent }) => {
  const PageContent = contentComponent || Content

  return (
    <section className="section section--gradient">
        <div
      className="full-width-image-container margin-top-0"
      style={{
        backgroundImage: `url(${
          !!image.childImageSharp ? image.childImageSharp.fluid.src : image
        })`,
      }}
    >
      <h2
        className="has-text-weight-bold is-size-1"
        style={{
          boxShadow: '0.5rem 0 0 #3571B8, -0.5rem 0 0 #3571B8',
          backgroundColor: '#3571B8',
          color: 'white',
          padding: '1rem',
        }}
      >
        {title}
      </h2>
    </div>    
      <div className="container">
       <div className="columns">
        <div class="tile is-ancestor">
          <div class="tile is-vertical is-8">
            <div class="tile">            
              <div class="tile is-parent">
                <article class="tile is-child box">
                <div className="column is-10 is-offset-1">
                <div className="section">
                <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                    {title}
                </h2>
                <PageContent className="content" content={content} />
               </div>
                </div>
                </article>
              </div>
            </div>          
          </div>
         <div><Sidebar /></div>
        </div>    
        </div>
      </div>
    </section>
  )
}

MentoringPageTemplate.propTypes = {
  image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
  title: PropTypes.string.isRequired,
  content: PropTypes.string,
  contentComponent: PropTypes.func,
}

const MentoringPage = ({ data }) => {
  const { markdownRemark: post } = data

  return (
    <Layout>
      <MentoringPageTemplate
        image={post.frontmatter.image}
        contentComponent={HTMLContent}
        title={post.frontmatter.title}
        content={post.html}
      />
    </Layout>
  )
}

MentoringPage.propTypes = {
  data: PropTypes.object.isRequired,
}

export default MentoringPage

export const mentoringPageQuery = graphql`
  query MentoringPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
        image {
            childImageSharp {
              fluid(maxWidth: 2048, quality: 100) {
                ...GatsbyImageSharpFluid
              }
            }
          }
      }
    }
  }
`

config.yml defining collection

      - file: src/pages/mentoring/index.md
        label: Mentoring
        name: mentoring
        fields:
          - label: Template Key
            name: templateKey
            widget: hidden
            default: mentoring-page
          - label: Title
            name: title
            widget: string
          - label: Image
            name: image
            widget: image

[ghost]

As suggested in other related issues to update the remote repo then it will solve the problem but I got the same build error on Netlify as well. Here is graphql screenshot: https://prnt.sc/sc328l I am using Netlify CMS and there is no option to create a new page so I am creating markdown pages locally but due to this I am facing this image issues. How can I solve this problem? how should I fetch a string image path in graphql query If it doesn't recognise it as an image field. please guide.

[ghost]

I removed this code from all pages for which I get an error and updated my repo again and it builds successfully. But now there are no banner images. How should I update them if I do from Netlify CMS then local repo is not updated and again if I add this code it will give me error. What is the best way to avoid this image related error.

image {
      childImageSharp {
        fluid(maxWidth: 2048, quality: 100) {
          ...GatsbyImageSharpFluid
        }
      }
    }

[vladar]

Hi @buxzee !

Sorry to hear you are running into an issue. This line may be problematic as it is not a relative path, so the image field may not be recognized as a file:

image: /img/e-book.jpg

Try using a relative path instead. Also, please check out this section in docs on how to set up images in markdown.

If this doesn't help - it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[danabrit]

Closing due to no reproduction or response in several weeks.