gatsby: gatsby-remark-images not working (gatsby v2)

I’ve just come across this, suffering the same issue. I am running Gatsby 2.18.6 and gatsby-transformer-remark ^2.6.38. I have tried most of the things listed under this issue as well as a few other similar ones stating the same problem, but to no avail. Clearing /node_modules and /.cache did nothing for me either.

However, I tried downgrading gatsby-transformer-remark to 2.1.1-beta.3 as mentioned by @greglobinski. Initially this didn’t do anything, but I then found that changing file extensions from .jpg to .jpeg on all affected images seemed to solve the problem - they all appear perfectly now.

This is definitely odd and not a solution I would have expected to have worked but for some reason it does.

tl;dr - gatsby-transformer-remark @ 2.1.1-beta.3 and change the file extension of affected images from .jpg to .jpeg.

I actually stumbled into this case again, and it seems that only by applying @martin-css solution of adding ignoreFileExtensions: [] I was able to solve this

I don’t know why, but I know that if one of these is higher than versions below, the gatsby-remark-images does not do the job 😃

Till these versions images are generated as they should “gatsby”: “2.0.0-beta.56”, “gatsby-transformer-remark”: “2.1.1-beta.3”,

Update: Confirm @giraffesyo 's statement, gatsby on beta 59 works fine.

I can confirm that gastby-remark-images (2.0.1-beta.9) isn’t working for me either. I don’t have time today to dig into why but gatsby-remark-copy-linked-files does work with ignoreFileExtensions set to [] as a clunky work around in the meantime.

This bug is not related to the gatsby package, as I can operate fine on beta 59. However, as soon as I upgrade from gatsby-transformer-remark beta 3 to beta 4 the bug is there.

Came across this issue today with gatsby v4. My problem was that the gatsby-remark-images do not make any changes to some image files.

What worked for me was to change the images (both the image and the inline markdown) with .PNG extension to .png extension.

I also ran into the same issue.

What is more weird is that 22 out of 69 images are processed. All of these processed images work fine (the src of parsed img in the markdown is correctly set, and the images of different versions are placed in the destination folder), whereas the rest of pictures and their respective imgs in the markdown remain unprocessed. The images that are processed seem determined and not random.

I have also found that in the GraphiQL, querying images with the following GraphQL query will yield all the 69 images, including those that are not processed.

  allImageSharp {
    nodes {
      id

    }
  }

What is more important is once the src of the pictures are queried (for example using the following query), the process of the rest of images will start, and the thumbnails will be created. The markdown will remain unchanged, though.

query MyQuery {
  allImageSharp {
    nodes {
      id
      sizes {
        src
      }
    }
  }
}

Currently I have to use the gatsby-remark-copy-linked-files to process the images.

package.json

"gatsby": "~2.13.15",
"gatsby-plugin-sharp": "~2.2.4",
"gatsby-remark-images": "~3.1.4",
"gatsby-transformer-remark": "~2.6.3",
"gatsby-transformer-sharp": "~2.2.2",

My repo: https://github.com/vicblog/VicBlog-Gatsby.

If anyone has the time to investigate further, there’s a new debugging guide that may be useful https://next.gatsbyjs.org/docs/debugging-the-build-process/

Hi @LeKoArts, I have deleted my node_modules and .cache folder and reinstall the package by running npm install

No luck, nothing works.

My repo: https://github.com/khmy2010/kehan.com

Try deleting your node_modules and .cache folder and reinstalling the packages.

Can you provide a sample repo?

Just an update, I tried the canary tag which worked then tried the next tag again and responsive images are now being inserted into the HTML on a production build. Must have been a cache or module version issue.

@khmy2010 Worth noting that you don’t see the output in development (e.g. gatsby develop), only the production build (gatsby build). However, would be nice to see something in development other than a broken image link.

The version of my gatsby-remark-images and gatsby-plugin-sharp are 1.5.67 and 1.6.48 respectively

You need to use the v2 versions of the plugins. The migration guide explains that