[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.

[KyleAMathews]

@jlengstorf you don't have gatsby-plugin-sharp in the plugins array in your gatsby-config.js? It's required there.

It should be a peerDependency for both gatsby-remark-image and gatsby-transformer-sharp not a direct dependency. Yeah, that is inconsistent then and we should fix it. Would you like to do a PR for that?

Thanks for looking into these and cleaning things up!

[patreeceeo]

@KyleAMathews I'm still running in to this issue. I've tracked it down to https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js#L61. Seems like responsiveSizesResult doesn't have a base64 property, which results in inline CSS on the blur-up span like this:

padding-bottom:63.16666666666667%;
position:relative;
bottom:0;
left:0;
background-image:url('data:image/jpeg;background-size:cover;display:block

[ChrisBoon]

I'm having the same issue as @pzatrick - when I build the project (gatsby build) I get this as the span result:

<span class="gatsby-resp-image-background-image" 
  style="padding-bottom:76.50273224043715%;
    position:relative;
    bottom:0px;
    left:0px;
    background-image:url('data:image/png;background-size:cover;display:block;" 
  data-reactid="396"
>

The background-image property isn't compiling correctly so it treats all css after it as one declaration. This means there is a failed image request and the css doesn't render correctly.

However when I view the development files (gatsby develop) I get this slightly different code:

<span class="gatsby-resp-image-background-image" 
  style="padding-bottom: 76.5027%; 
    position: relative; 
    bottom: 0px; 
    left: 0px; 
    background-image: url(&quot;data:image/png&quot;); 
    background-size: cover; 
    display: block;"
>

The background-image property still doesn't seem right as there is basically no data, but at least it doesn't break the rest of the css.

I can provide details on my setup if that is useful, not sure if this is a known issue, but this is the first time I've seen someone say they have the same error as me.

[patreeceeo]

@ChrisBoon yep, I'm having the exact same issue. Make any progress on it?

[patreeceeo]

My gatsby-config:

module.exports = {
    siteMetadata: {
        title: `Personal site of Patrick Canfield`,
        description: ``,
        siteUrl: `https://patrickcanfield.com`
    },
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/src/blog`,
                name: 'pages',
            },
        },
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 800,
                        },
                    },
                    'gatsby-remark-prismjs',
                    'gatsby-remark-copy-linked-files',
                    'gatsby-remark-smartypants',
                ],
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                //trackingId: `ADD YOUR TRACKING ID HERE`,
            },
        },
        {

            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'
                    }
                ]
            }
        },
        `gatsby-plugin-react-helmet`,
        {
            resolve: 'gatsby-plugin-typography',
            options: {
                pathToConfigModule: 'src/utils/typography',
            },
        },
    ],
};

[ChrisBoon]

@pzatrick no, I've not had much chance to look into it. I didn't really need the 'blur up' feature, so I just added 'display: block' in my own CSS to make sure the image displays. I'd like to resolve it because I'm not happy with the failed get requests happening in a live site, but most people will never notice it.

I have noticed that somehow in the last day the issue partially improved as the deployed site is now the same as the develop version - background-image: url("data:image/png"); so the rest of the css applies correctly. What's odd is I don't think I've done anything that would have changed it.

[lfittl]

FWIW, running into the same issue as described in the last few comments.

@KyleAMathews should that be a new issue, or can we re-open this issue?

[lfittl]

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 syntax-tree/hast-to-hyperscript#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

[ChrisBoon]

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

[kevinhughes27]

I had the same thing and this fix worked for me! Thanks for sharing.

[SpicyPete]

Running into this same issue.
Is there a fix for it yet? Or instructions on how to use the fix posted up a few comments?

[lfittl]

@pzenger Seems the issue was resolved in hast-to-hyperscript recently (by using an external library for CSS parsing) - that means you should be able to use their master branch (or release when there is one) instead of my fork now.

[kevinhughes27]

looks like hast-to-hyperscript 5.0.0 is out now and includes the fix. I tried locally and it works for me.

[SpicyPete]

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