Images not being copied to public/static on gatsby build

[jacobtyq]

Description

I am receiving 404 errors when rendering images from MDX files after running gatsby build. Initially I thought it happens to certain images but it happens randomly enough that I am not sure if it's an issue with the images or a config issue. I am importing png and jpg.

This issue does not occur on local development environment gatsby develop -H 0.0.0.0, only when you build.

I have tried to clear the .cache and public folders using gatsby clean before each build, and I do not know if it's an issue with the images, plugin, or mdx files.

Steps to reproduce

Here's my file structure and image tag in markdown.

Expected result

On localhost, the images would appear in their corresponding folder, this happens on gatsby develop -H 0.0.0.0

Actual result

However, upon deployment, the images are missing and do not show up in the /public/static/ folder.

File is missing from the public/static folder

Environment

  System:
    OS: macOS 10.14.4
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v10.11.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0
    Safari: 12.1
  npmPackages:
    gatsby: ^2.5.0 => 2.9.4
    gatsby-mdx: ^0.6.3 => 0.6.3
    gatsby-plugin-google-tagmanager: ^2.0.15 => 2.0.15
    gatsby-plugin-layout: ^1.1.0 => 1.1.0
    gatsby-plugin-postcss: ^2.0.7 => 2.0.7
    gatsby-plugin-sharp: ^2.0.37 => 2.0.37
    gatsby-remark-copy-linked-files: ^2.1.0 => 2.1.0
    gatsby-remark-images: ^3.0.11 => 3.0.11
    gatsby-remark-relative-images: ^0.2.2 => 0.2.2
    gatsby-source-filesystem: ^2.0.28 => 2.0.37
  npmGlobalPackages:
    gatsby-cli: 2.6.13

Gatsby Config

  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: "src",
        path: `${__dirname}/src/content/`,
      },
    },
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 768
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-postcss',
      options: {
        postCssPlugins: [
          require('postcss-preset-env')({ stage: 0 }),
          require("postcss-nested")(),
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-google-tagmanager',
      options: {
        id: "XXX-XXXXXXXX",

        // Include GTM in development.
        // Defaults to false meaning GTM will only be loaded in production.
        includeInDevelopment: true
      },
    },
    {
      resolve: 'gatsby-plugin-layout',
      options: {
          component: require.resolve('./src/components/Layout.js')
      }
    }
  ],

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[LpmRaven]

I am having the same issue. I have looked through some of KyleAMathews theme repos and they seem to be referencing images in the same way. I'm sure this is just a config that needs documentation, hopefully, someone can provide information.

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[cloverich]

(Mostly unrelated to OP, but in case any other lost souls find this in Google)

I had this issue recently, because I"d inadvertently included gastby-plugin-remark twice. The image copying / processing was present in only the first gatsby-plugin-remark plugin definition, so the second one was perhaps overwriting the content of the first, but without copying the images? Silly mistake, but I was at a complete loss for how to debug. Minimal reproduction notwithstanding, is there some standard debug steps for scenarios like this? (i.e. a way to see I/O after each plugin runs?)

EDIT: Clarify "I don't even know" a bit further. Probably requires understanding how plugins work, which is fine. Hope this comment is helpful to someone.

[chungeric]

Having the same issue on one of my sites. Images fine on development mode locally. However in production mode both on local and on production (Netlify) the images don't load. Only the blurred low-res version of images are loaded. I get a 404 error for each image.

Edit: Only webp images are not getting loaded for me. JPGs seem to be accessible if I visit their url manually

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[coloneltravis]

Having the same issue on one of my sites. Images fine on development mode locally. However in production mode both on local and on production (Netlify) the images don't load. Only the blurred low-res version of images are loaded. I get a 404 error for each image.

Edit: Only webp images are not getting loaded for me. JPGs seem to be accessible if I visit their url manually

Hi, Are the images that are not loading called by useStaticQuery in a component, or are they part of a standard GraphQL query? I am experiencing a similar issue and suspect that images used in a component need to be copied to a static folder.

[robations]

I think I'm seeing the same issue*. Images are coming from Airtable via a normal GraphQL query, but are missing from the public/static directory. I get the base64 preview but the main image doesn't load. For example, the page is referring to an image like this:

http://localhost:8000/static/13e3d29311cd136b2ebec50d36b3d549/6bfb6/52ec984cc72302fd412e2aa145a6526c_S.webp

I have public/static/13e3d29311cd136b2ebec50d36b3d549 but that directory is empty on the disk.

Two observations so far:

• I don't remember having this problem until fairly recently
• Clearing the gatsby cache temporarily fixes the issue (until subsequent gatsby develop)

* except happens with gatsby develop for me, maybe a different issue?

[Steven24K]

I had the problem as well, it was caused buy duplicate use of gatsby-source-filesyste.

[VeVas]

I had the same issue, it was caused by two plugins doing business in my images folder:

Changed this:

plugins: [
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: '/src/images/svg/'
        },
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: '/src/images'
      },
    }
]

To this. Moved my .svg files to root, and updated gatsby-config.js accordingly

plugins: [
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: '/svg/'
        },
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'images',
        path: '/src/images'
      },
    }
]

solved the problem.

[edmundweir]

Can confirm @VeVas 's answer. Adding:

rule: { include: '/svg/' }

...worked for me!