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

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.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 23 (7 by maintainers)

Commits related to this issue

Most upvoted comments

Actually nevermind, this seems to be a bug in https://github.com/rhysd/rehype-react - when processing your Markdown generated HTML through that (as described here: https://using-remark.gatsbyjs.org/custom-components/) it seems to stop processing anything in each style key-value pair after encountering the first ; in the value.

At least in my case thats the reason for running into the described error - the base64 value itself is generated correctly.

Fixed by https://github.com/syntax-tree/hast-to-hyperscript/pull/13 for me, which can be applied to your app using yarn add git://github.com/lfittl/hast-to-hyperscript for testing / hotfixing this issue.

cc @ChrisBoon @pzatrick

@lfittl Indeed it is working now! Thanks for making that PR

@lfittl Awesome, just tried it and it fixed it for me.

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.