ericwindmill/gatsby-starter-docs

Image Issues

Closed this issue · 2 comments

Hey @ericwindmill
Trying to setup gatsby for a site documentation, using your boilerplate. It seems that images are not working (referred in markdown). Can you please see why this is happening ?

Taking specific about in-project images, not those accessible on public urls.

Found the answer.
Use gatsby-remark-images to achieve that. Here is my final plugins attribute value in gatsby-config.js

[
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              backgroundColor: "transparent"
            }
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 2em`
            }
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`
        ]
      }
    },
  ]