gatsby: gatsby-remark-images not showing certain images in `build`

I’ve recently added gatsby-remark-images to my site and have two markdown posts with images. Both images are referenced in their respective .md files like so ![alt text](imagename.png) In both cases I have the following file structure

-post-folder
-- index.md
-- imagename.png

In gatsby develop, both images show correctly in the posts and when I run gatsby build locally, I can see both images output to the public folder in the many sizes gatsby-remark-images generates.

However, when I run my build on wercker only one of the posts generates the HTML to render the image.

I’m just about to check the output files in the production to see if the production build actually produced the image files for the missing post, but wondered if there is any way I can begin to debug this apart from checking the output and fiddling with versions etc.

EDIT: Having checked my production server, only the images for one of the two posts have even been generated so I’m now wondered why? Is there anything in gatsby-remark-images which would stop it trying to generate images under certain conditions? (Do the image have to be any specific size to start with? is there any dependency between the image size and the config options in the plugin etc?) I couldn’t find too much in the docs in this area,

If it’s any help, my config is as simple as I could make it.

      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
            }
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              linkImagesToOriginal: false,
            }
          }
        ] 
      }
    }

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (8 by maintainers)

Most upvoted comments

@zamhaq I’m no expert but what I’ve done to get mine to work reliably is clear the cache and follow the rest of the docs. There may be better solutions out there but this is working for me.

In my gatsby-config.js (like the docs say)

module.exports = {
  pathPrefix: '/blog',
// plus all the rest of the config

Then I have two custom npm run scripts in my package.json that clears the cache before running the that mode.

Note: t build uses --prefix-path (also like the docs say)

  scripts: {
    "dev": "rm -rf .cache/* && gatsby develop",
    "deploy-pl": "rm -rf .cache/* && gatsby build --prefix-paths
  }

Then run npm run dev and npm run deploy-pl

Note: I stop dev before running build.

HyperSprite on Nov 15, 2017

@HyperSprite @KyleAMathews When I open index.html from the public folder in the browser I see my navigation element but not the images. However I can see the img tag in the dev tool and changing its src from <img src="/static/7da0684ba1b8e5e39c548de721a28c6f-fb0df.jpg" ...> to <img src="./static/7da0684ba1b8e5e39c548de721a28c6f-fb0df.jpg" ...> makes the image visible again.

Everything works okay without the above issues when I load the site to localhost via gatsby serve Do you have any suggestions?

shsp on Nov 15, 2017

@alisonjoseph - Wish I had a better answer for you here because this was driving me crazy. My buddy was saying it was working for him and I just let him upload the rest of the content, never quite figured out what it was 😦. I think it was just one of those weird things, nothing I or he did specifically to make it work I don’t think. Maybe it was like a minor package version difference we had from running npm install at various points

Aaronm14 on Aug 7, 2018

I just had the same issue with all my svg’s; I’ll help look into this next week.

Looks like it might be that png’s are fine and this issue’s only appearing with gifs and svg's since they aren’t going through the same pipeline.

They get copied onto the target but somewhere along the lines the pathPrefix is missing.

I’m guessing it starts somewhere around here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-images/src/index.js#L138-L141

seryl on Dec 25, 2017

I was having this same issue. I had pathPrefix: '/blog', in the root of my gatsby-config export but photos were linked to /static and not /blog/static. I added pathPrefix: '/blog' to the plugins like so:

{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-images',
        options: {
          maxWidth: 690,
          pathPrefix: '/blog',
        }, // etc. etc.

and it seems to be working fine in production but not in dev.

HyperSprite on Nov 11, 2017