gatsby-remark-images not working (gatsby v2)

[khmy2010]

1. I have read the issue at gatsby-remark-images - absolute path to image #6464 to double check the image is relative path
2. I have put the .jpg file together with the .md file

Screenshot for 1 and 2

3. I have double check the gatsby-config.js and here is the snippet:

module.exports = {
  siteMetadata: {
    title: 'Ke Han',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-catch-links',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            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: 700,
            },
          },
        ],
      },
    },
  ],
}

4. I have double check my markdown to ensure it points to the correct file:
   ![Chinese Salty Egg](./fanfan.jpg)

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

6. I have double checked the documentations on Gatsby V1 and Gatsby V2

After all this, the images are still not showing.
Screenshot 2: the images does not show up in the web page

Screenshot 3: gatsby-remark-images is not even doing the work

My environment:

1. Mac OS 10.11.1
2. Google Chrome Version 67.0.3396.99 (Official Build) (64-bit)
3. Using Gatsby V2

I have read the following before I came to this point:
Gatsby Starter Blog V2 Example
Example on how to insert images into markdown

Everything appears normal during compiling:

Please enlighten me on this issue, thanks.

[LekoArts]

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

[khmy2010]

@LekoArts thanks for reply.

I have go through every npm packages that I had and update them, now my dependencies are:

  "dependencies": {
    "gatsby": "^2.0.0-beta.56",
    "gatsby-plugin-catch-links": "^1.0.24",
    "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
    "gatsby-plugin-sharp": "^2.0.0-beta.7",
    "gatsby-remark-images": "^2.0.1-beta.9",
    "gatsby-source-filesystem": "^2.0.1-beta.9",
    "gatsby-transformer-remark": "^2.1.1-beta.4",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-helmet": "^5.2.0"
  }

Is there anything I need to take note when using latest packages related to my problem above? Because the problem still persists.

I have double check the config file at branchv2 at gatsby-starter-blog

This is my gatsby-config.js

plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-catch-links',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            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: 700,
            },
          },
        ],
      },
    },
  ],

Is there any place where I can look for regarding the syntax changes for specific plugins at Gatsby?
I have read the following:
Migrating from v1 to v2

Also, is there any additional packages / plugins required for this to work?
Just in case the gatsby-remark-images page didn't get updated.

[martin-css]

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.

[khmy2010]

Not sure if it affects my case, but to follow suit I followed gatsby-config.js@v2 to install gatsby-transformer-sharp just that everything is similar with the example.

But, no luck. still not working.

ps: gatsby-transformer-sharp I installed is version ^2.1.1-beta.6, doubled check the migration guide and concluded that none of those relevant to my use case.

[martin-css]

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.

[LekoArts]

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

Can you provide a sample repo?

[khmy2010]

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

[m-allanson]

Thanks for the detailed report @khmy2010 - there's nothing that looks obviously wrong above. Are you able to post a link to your project's source code? Edit: I saw you added this since I opened this issue yesterday :)

Or you could try checking out the Gatsby repo and running the using-remark example site?

There's a page there that demos using images: https://using-remark.gatsbyjs.org/responsive-images-and-iframes/

Then work back from there and see if there's any differences in the example project vs your project.

[greglobinski]

Hi, I have similar issue.

If I get gatsby-starter-blog and install it with the flag #v2, gatsby-remark-images doesn't work. Images are like @khmy2010 described.

I've got the example repo @m-allanson pointed at, the same, doesn't work, but when I deployed it to Netlify it works
demo: https://eager-jang-b3cdb0.netlify.com/responsive-images-and-iframes/ thats
repo: https://github.com/greglobinski/gatsby-test-2

Any idea what's the problem, my localhost is

• windows 7
• yarn 1.3.2
• npm 5.6.0
• node 8.11.1

When I started with gatsby v1 I had some problems to make sharp work, probably like many Win users. Something changed with regard to it and gatsby v2, any special treatment? :)

ps: gatsby-remark-images on localhost does not do its job, but it also does not send any errors messages.

@khmy2010 Could you please check if deploying resolves your issue too?

[m-allanson]

I spent a bit of time digging into this and there sure seems to be something odd going on...

It seems like files isnt' being passed in correctly, which is preventing the images from being processed. I haven't yet had a chance to investigate further.

@greglobinski hmm that's interesting that your site works on netlify but not locally.

[m-allanson]

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/

[greglobinski]

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.

[giraffesyo]

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.

[m-allanson]

as soon as I upgrade from gatsby-transformer-remark beta 3 to beta 4 the bug is there

This might be the relevent commit: f0ef8b2

[KyleAMathews]

Fixed in #6792

Thanks @giraffesyo!

[pgilad]

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

[oddguan]

I got the same issue again as well.

[ddadaal]

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.

[Reeceeboii]

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.

[Fasani]

Came across this today... after about 30 mins, I just did uninstall and reinstall on ‘gatsby-transformer-remark’ small minor bump on the version and then it just works as expected.

[bytrangle]

I came across this issue today. Here is what I've noticed:

• When you inline an image in your Markdown file, the gatsby-remark-images create an <img /> tag with src to the public path of the image. By convention, this image is publicly available at /static/<long image id>/<file-name> relative to your web host. For example, https://gatsbyjs.com/static/c2c18af971336184c1592724b124a639/gatsby-remark-images-not-working.png.
• On you local machine, this image should be available at public/static/c2c18af971336184c1592724b124a639/gatsby-remark-images-not-working.png.

I noticed that the broken image wasn't available at the above path. For whatever reason, gatsby-remark-images created the new folder c2c18af971336184c1592724b124a639 in public, that it didn't copy the image.

Clearing cache, uninstalling and installing all the related plugins did nothing for me. But somehow I accidentally made it work by doing a hard refresh (Cmd + Shift + R) on the page with the broken inline image. Then I saw that the image was rightfully copied to the right folder in public.

Give that a try. You won't get those 30 minutes back.

[tlylt]

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.

[ohyunkyo]

changing file extension is work for me
thx @tlylt

[pgooch]

I'm experiencing this today, latest Gatsby and all that. Found that if I set linkImagesToOriginal to true it works as expected. I had set it to false since there was no need for the link but I don't see how having the link will be a problem. Might be something to check for as well.