Images variables in templates

I am attempting to create a template that has an image parameter. When I attempt to display to image, it can’t find the reference to it.

Here is the template, newsletter-page.js

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 Img from 'gatsby-image'

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

  return (
    <section className="section section--gradient">
      <div className="container">
        <div className="columns">
          <div className="column is-10 is-offset-1">
            <div className="section">
              <h2>test</h2>
              <img src={image} alt="dummy"  />
              <h2>end test</h2>
              <h2 className="title is-size-3 has-text-weight-bold is-bold-light">
                {title}
              </h2>
              <PageContent className="content" content={content} />
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

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

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

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

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

export default NewsletterPage

export const newsletterPageQuery = graphql`
  query NewsletterPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        title
      }
    }
  }
`

Here is a usage of it:

---
templateKey: newsletter-page
title: Newsletter
image: /img/jumbotron.jpg
---

### Shade-grown coffee

Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species.

Where

              <h2>test</h2>
              <img src={image} alt="dummy"  />
              <h2>end test</h2>

outputs as

<img alt="dummy"  />

How do I get that image into the output page correctly?

Hi John, I am moving your post to our area on static site generators where there might be someone who has some insight for you - while there are definitely Hugo users here, do keep in mind this is predominantly a Netlify support forum :slight_smile: In order to get the best help, i also recommend having a live site or some code that people can look at - we summarized our advice here for folks :+1:

Hi,

I recommend checking out this starter template: https://github.com/netlify-templates/gatsby-starter-netlify-cms

It uses gatsby image and the Netlify CMS as well. Let us know if you continue to have trouble.