CODEWITHSUNDEEP
reactjsgatsbygatsby-image
TrevPennington
TrevPennington

Reputation: 475

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)

Upvotes: 3

Views: 1425

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281626

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.

Upvotes: 3

Related Questions