Netlify CMS and Gatsby: Images are not rendering

I’m trying to create a blog following the book “Gatsby and Netlify CMS” by Joe Attardi. I ran into an issue where the images are not rendering in the post itself.

Here is an example:

Link to page:

This is my BlogTemplate file:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import styles from "./blog.module.css"

export default function BlogTemplate({ data }) {
  return (
      <div className={}>
        <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      frontmatter {

This is my confic.yml file:

  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img”

  - name: "blog"
    label: "Blog"
    folder: "src/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
      - label: "Title"
        name: "title"
        widget: "string"
      - label: "Publish Date"
        name: "date"
        widget: "datetime"
      - label: "Body"
        name: "body"
        widget: "markdown"

Here is my gatsby-config.js file:

module.exports = {
  siteMetadata: {
    title: "The Coffee Blog",

  plugins: [
      resolve: "gatsby-source-filesystem",
      options: {
        name: "blog",
        path: "src/blog",
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,

Here is my gatsby-node.js file:

const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")

exports.onCreateNode = function({ node, getNode, actions }) {
  const { createNodeField } = actions

  if (node.internal.type === "MarkdownRemark") {
    const slug = createFilePath({ node, getNode })
      name: "slug",
      value: slug,

exports.createPages = async function({ graphql, actions }) {
  const { createPage } = actions

  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
  `){ node }) => {
      path: node.fields.slug,
      component: path.resolve("./src/templates/blog.js"),
      context: {
        slug: node.fields.slug,

Can you help me figure out what I do wrong?

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help: - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

You just add a plugin: