Search code examples
reactjsgatsbygatsby-image

gatsby remark images does not display image


I've seen this elsewhere and have tried numerous things but cannot get it to work for me. .md body photos will not display via gatsby-remark-images. I have updated everything to newest versions as well.

update now shows full config file

config:

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `xxx`,
    description: `xxx`,
    author: `xxx`,
  },
  plugins: [
    {
      resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1500,
              withWebp: true,
              showCaptions: true,
              quality: 100,

            },
    },
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown-pages`,
        path: `${__dirname}/src/markdown-pages`,
      },
    },


    `gatsby-plugin-sharp`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,


    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `white`,
        theme_color: `white`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

inside md:

![fail](../images/demo/fail.jpeg)

Solution

  • In order to use the default syntax for images in markdown, you can specify the gatsby-images-remark plugin to within options to gatsby-transformer-remark like

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1500,
              withWebp: true,
              showCaptions: true,
              quality: 100,
            },
          },
        ],
      },
    },
    

    Check the gatsby documentation for more details.