[gatsby-remark-images] new images 404 or end up being 0x0 pixels

[patreeceeo]

In effect, I can't add new images to my blog using gatsby-remark-images

Environment

Gatsby version: 1.9.157
Node.js version: 8.6.0
Operating System: macOS 10.12.6

File contents (if changed):

gatsby-config.js:

module.exports = {
    siteMetadata: {
        title: `Personal site of Patrick Canfield`,
        description: ``,
        siteUrl: `https://patrickcanfield.com`
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {

            resolve: `gatsby-plugin-feed`,
            options: {
                query: `
                    {
                      site {
                        siteMetadata {
                          title
                          description
                          siteUrl
                          site_url: siteUrl
                        }
                      }
                    }
                `,
                feeds: [
                    {
                        serialize: ({ query: { site, allMarkdownRemark } }) => {
                            return allMarkdownRemark.edges.map(edge => {
                                return Object.assign({}, edge.node.frontmatter, {
                                    description: edge.node.excerpt,
                                    url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
                                    guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
                                    custom_elements: [{ 'content:encoded': edge.node.html }],
                                });
                            });
                        },
                        query: `
                            {
                              allMarkdownRemark(
                                limit: 1000,
                                sort: { order: DESC, fields: [frontmatter___date] },
                              ) {
                                edges {
                                  node {
                                    excerpt
                                    html
                                    frontmatter {
                                      title
                                      date
                                      path
                                    }
                                  }
                                }
                              }
                            }
                          `,
                        output: '/rss.xml',
                        feedTitle: 'Blog of Patrick Canfield'
                    }
                ]
            }
        },
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography.js`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/src/blog`,
                name: 'pages',
            },
        },
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    `gatsby-remark-smartypants`,
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            // It's important to specify the maxWidth (in pixels) of
                            // the content container as this plugin uses this as the
                            // base for generating different widths of each image.
                            maxWidth: 800,
                            // Remove the default behavior of adding a link to each
                            // image.
                            linkImagesToOriginal: false,
                        },
                    },
                    {
                        resolve: 'gatsby-remark-copy-linked-files',
                        options: {
                            // `ignoreFileExtensions` defaults to [`png`, `jpg`, `jpeg`, `bmp`, `tiff`]
                            // as we assume you'll use gatsby-remark-images to handle
                            // images in markdown as it automatically creates responsive
                            // versions of images.
                            //
                            // If you'd like to not use gatsby-remark-images and just copy your
                            // original images to the public directory, set
                            // `ignoreFileExtensions` to an empty array.
                            // ignoreFileExtensions: [],
                        },
                    }
                ]
            }
        },
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: '...',
                // Setting this parameter is optional
                anonymize: true
            },
        },
    ],
};

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "classnames": "^2.2.5",
    "font-awesome": "^4.7.0",
    "gatsby": "^1.9.112",
    "gatsby-cli": "^1.1.19",
    "gatsby-link": "^1.6.22",
    "gatsby-plugin-feed": "^1.3.11",
    "gatsby-plugin-google-analytics": "^1.0.11",
    "gatsby-plugin-react-helmet": "^1.0.8",
    "gatsby-plugin-sharp": "^1.6.15",
    "gatsby-plugin-typography": "^1.7.10",
    "gatsby-remark-copy-linked-files": "^1.5.21",
    "gatsby-remark-images": "^1.5.36",
    "gatsby-remark-smartypants": "^1.4.8",
    "gatsby-source-filesystem": "^1.5.5",
    "gatsby-transformer-remark": "^1.7.18",
    "lodash.omit": "^4.5.0",
    "react-fontawesome": "^1.6.1",
    "react-html-parser": "^2.0.1",
    "react-popper": "^0.7.4",
    "resize-observer-polyfill": "^1.5.0",
    "sharp": "^0.18.4",
    "typography-theme-lawton": "^0.15.10"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.7.4"
  }
}

gatsby-node.js:

const path = require('path');

exports.createPages = ({ boundActionCreators, graphql }) => {
    const { createPage } = boundActionCreators;

    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);

    return graphql(`{
        allMarkdownRemark(
          sort: { order: DESC, fields: [frontmatter___date] }
          limit: 1000
        ) {
          edges {
            node {
              excerpt(pruneLength: 250)
              html
              id
              frontmatter {
                date
                path
                title
              }
            }
          }
        }
      }`
    ).then(result => {
        if (result.errors) {
            return Promise.reject(result.errors);
        }

        result.data.allMarkdownRemark.edges
            .forEach(({ node }) => {
                createPage({
                    path: node.frontmatter.path,
                    component: blogPostTemplate,
                    context: {} // additional data can be passed via context
                });
            });
    });
};

gatsby-browser.js: not changed
gatsby-ssr.js: not changed

Before submitting this issue I tried:

• changing the image format from PNG to JPEG
• using different images
• changing the path of the blog post
• resizing the image
• upgrading to latest version of plugin

Steps to reproduce

Here's a page on my blog with the issue: https://patrickcanfield.com/blog/2016/01/15/sleep-mindfulness-art/

Here's the source code for that post: https://raw.githubusercontent.com/pzatrick/patrickcanfield.com/master/gatsby/src/blog/test.md

For now my workaround is to use an img tag with an absolute URL to the image in the Gatby-generated static assets.

[KyleAMathews]

Looks like you need to add gatsby-plugin-sharp to your gatsby-config.js — which... isn't in the instructions so totally get why you didn't see that :-( I'll fix up the README real quick https://www.gatsbyjs.org/packages/gatsby-remark-images/

[patreeceeo]

@KyleAMathews Did I do this right? I updated my config per that README, did gatsby build && gatsby serve and I'm still experiencing the issue locally. Here's my config now:

module.exports = {
    siteMetadata: {
        title: `Personal site of Patrick Canfield`,
        description: ``,
        siteUrl: `https://patrickcanfield.com`
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        {

            resolve: `gatsby-plugin-feed`,
            options: {
                query: `
                    {
                      site {
                        siteMetadata {
                          title
                          description
                          siteUrl
                          site_url: siteUrl
                        }
                      }
                    }
                `,
                feeds: [
                    {
                        serialize: ({ query: { site, allMarkdownRemark } }) => {
                            return allMarkdownRemark.edges.map(edge => {
                                return Object.assign({}, edge.node.frontmatter, {
                                    description: edge.node.excerpt,
                                    url: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
                                    guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
                                    custom_elements: [{ 'content:encoded': edge.node.html }],
                                });
                            });
                        },
                        query: `
                            {
                              allMarkdownRemark(
                                limit: 1000,
                                sort: { order: DESC, fields: [frontmatter___date] },
                              ) {
                                edges {
                                  node {
                                    excerpt
                                    html
                                    frontmatter {
                                      title
                                      date
                                      path
                                    }
                                  }
                                }
                              }
                            }
                          `,
                        output: '/rss.xml',
                        feedTitle: 'Blog of Patrick Canfield'
                    }
                ]
            }
        },
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography.js`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/src/blog`,
                name: 'pages',
            },
        },
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    `gatsby-remark-smartypants`,
                    `gatsby-plugin-sharp`, // for gatsby-remark-images
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            // It's important to specify the maxWidth (in pixels) of
                            // the content container as this plugin uses this as the
                            // base for generating different widths of each image.
                            maxWidth: 800,
                            // Remove the default behavior of adding a link to each
                            // image.
                            linkImagesToOriginal: false,
                        },
                    },
                    {
                        resolve: 'gatsby-remark-copy-linked-files',
                        options: {
                            // `ignoreFileExtensions` defaults to [`png`, `jpg`, `jpeg`, `bmp`, `tiff`]
                            // as we assume you'll use gatsby-remark-images to handle
                            // images in markdown as it automatically creates responsive
                            // versions of images.
                            //
                            // If you'd like to not use gatsby-remark-images and just copy your
                            // original images to the public directory, set
                            // `ignoreFileExtensions` to an empty array.
                            // ignoreFileExtensions: [],
                        },
                    }
                ]
            }
        },
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: '...',
                // Setting this parameter is optional
                // anonymize: true
            },
        },
    ],
};

[KyleAMathews]

Not quite — you added gatsby-plugin-sharp as a "sub-plugin" to gatsby-transformer-remark. You want to add it as a top-level plugin at the same level as the other non-remark plugins.

[patreeceeo]

Ok, I changed my config accordingly, did gatsby build && gatsby serve, cleared my cache, yet the issue seems to persist.

[KyleAMathews]

Not sure — compare your site to the blog starter to see if there's a difference. Also try installing the blog starter to make sure there's not something misconfigured on your computer https://github.com/gatsbyjs/gatsby-starter-blog

[ralrom]

Not quite — you added gatsby-plugin-sharp as a "sub-plugin" to gatsby-transformer-remark. You want to add it as a top-level plugin at the same level as the other non-remark plugins.

The instructions in the README (see jastack@301833e) don't reflect your statement. I took a look at the starter-blog template and it also adds gatsby-plugin-sharp as a top-level plugin so I believe the README is wrong

[jlengstorf]

@KyleAMathews Is it gatsby-plugin-sharp or gatsby-transformer-sharp?

I just checked my own site and I'm using the transformer, but maybe I'm doing it wrong? (FWIW, adding images works on my site.)

I tweaked those docs in gatsby-starter-blog and can submit a PR once there's a confirmation that it's working for everyone.

@ralrom @pzatrick Here are the relevant settings my config, for reference:

module.exports = {
  plugins: [
    // ...
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 1380,
              linkImagesToOriginal: false,
            },
          },
          // ...
        ],
      },
    },
  ],
};

[KyleAMathews]

• gatsby-plugin-sharp is a utility library that other plugins can use for image processing primitives.
• gatsby-transformer-sharp is a transformer plugin that converts File nodes into ImageSharp nodes letting you run queries that process images in a variety of ways. It uses gatsby-plugin-sharp under the hood to do the actual processing.
• gatsby-remark-images automatically resizes images referenced in markdown files so they're responsive and not overly large.

[jlengstorf]

Okay — so in my case, the gatsby-plugin-sharp is available to gatsby-remark-images because I'm using gatsby-transformer-sharp, I assume. Should gatsby-plugin-sharp be a dependency of gatsby-remark-images? Or a peerDependency?

It seems inconsistent that gatsby-transformer-sharp depends on gatsby-plugin-sharp but doesn't require it to be manually installed, but gatsby-remark-images does.

Let me know if you want me to open a new issue for this. In the meantime, I'll send a PR to update the docs for gatsby-remark-images.