gatsby-remark-images not showing certain images in build

[dougajmcdonald]

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,
            }
          }
        ] 
      }
    }

[markanthonyuy]

I have the same issue, when I'm in gatsby develop it displayed the images correctly but on build the images can't be found.

[markanthonyuy]

Upon investigation, I think my problem occurs because of the prefix path /blog, but the request to static files isn't /static/4233df1e1e504c24912f2c55e21158ff-ca545.jpg it has to be /blog/static/4233df1e1e504c24912f2c55e21158ff-ca545.jpg

[KyleAMathews]

@markanthonyuy yeah we seemed to have lost the code adding pathPrefix to urls at some point

gatsby/packages/gatsby-remark-images/src/index.js

Line 25 in 84a6845

pathPrefix,

[haquezameer]

@KyleAMathews @dougajmcdonald @markanthonyuy did you find any workaround ?

[HyperSprite]

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.

[KyleAMathews]

@HyperSprite gatsby-remark-images doesn't have a pathPrefix option so that won't do anything.

[KyleAMathews]

You perhaps just need to build your site with --path-prefix? https://www.gatsbyjs.org/docs/path-prefix/#production-build

[HyperSprite]

Sorry about any confusion I may have added to this thread.
It looks like I may have had some bad cache. I "rm -rf .cache/*" and tried both gatsby develop and gatsby build --prefix-paths and things seem to be working correctly.

[haquezameer]

@HyperSprite I am still having the same issue in production. It seems my images are still trying to link to /static instead of /blog/static. Can you tell me what should I do to set?

[HyperSprite]

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

[haquezameer]

@HyperSprite Thanks. So we need to clear the cache each time? I'll try this out.

[shsp]

@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?

[seryl]

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]

It looks like any data that gets cached needs to be destroyed when going between prefixed and non-prefixed builds. I only see this when switching between the different build types.

Maybe we could just set a file flag in cache?

If it says development, and you run development, no issue. If it says production and file flag says development, wipe public, wipe cache, start fresh.

Could do the same for dev, prod, prod + prefix.

[KyleAMathews]

Yeah — the remark caching doesn't account for prefixed & non-prefixed builds. Would love a PR adding if pathPrefixing is enabled to the cache keys!

gatsby/packages/gatsby-transformer-remark/src/extend-node-type.js

Line 24 in 8815d5f

let pluginsCacheStr = ``

[Aaronm14]

Could this issue be related to what I am currently seeing, which is when I have a .gif and .png image in a markdown file, the gif renders, but the png never even ha the HTML for it rendered?

[alisonjoseph]

@Aaronm14 Did you ever figure this out? I'm having the opposite issue. pngs are working but gifs are not.

[Aaronm14]

@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

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍