Images are broken in build version and console has errors like 'Missing resources for /'

On http://localhost:8000/ everything works properly but after deploy build version all images just displays with blur effect and blur doesn’t disappear at all

Also console has these errors(‘Missing resources’):

Environment (if relevant)

System: OS: macOS 10.14.4 CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 8.12.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/bin/python Browsers: Chrome: 75.0.3770.100 Safari: 12.1 npmPackages: gatsby: ^2.9.9 => 2.9.11 gatsby-background-image: ^0.7.2 => 0.7.2 gatsby-image: ^2.1.4 => 2.1.4 gatsby-plugin-compile-es6-packages: ^1.1.0 => 1.1.0 gatsby-plugin-manifest: ^2.1.1 => 2.1.1 gatsby-plugin-offline: ^2.1.3 => 2.1.3 gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2 gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 gatsby-plugin-sass: ^2.0.11 => 2.0.11 gatsby-plugin-sharp: ^2.1.5 => 2.1.5 gatsby-plugin-typography: ^2.2.13 => 2.2.13 gatsby-remark-images: ^3.0.16 => 3.0.16 gatsby-remark-relative-images: ^0.2.2 => 0.2.2 gatsby-source-filesystem: ^2.0.39 => 2.0.39 gatsby-transformer-json: ^2.1.11 => 2.1.11 gatsby-transformer-remark: ^2.4.0 => 2.4.0 gatsby-transformer-sharp: ^2.1.21 => 2.1.21 npmGlobalPackages: gatsby-cli: 2.6.5

File contents (if changed)

gatsby-config.js:

plugins: [
   `gatsby-plugin-react-helmet`,
   {
     resolve: "gatsby-source-filesystem",
     options: {
       path: `${__dirname}/src/images`,
       name: "images",
     },
   },
   `gatsby-transformer-sharp`,
   `gatsby-plugin-sharp`,
   {
     resolve: `gatsby-source-filesystem`,
     options: {
       path: `${__dirname}/content`,
       name: `markdown`,
     },
   },
   {
     resolve: `gatsby-transformer-remark`,
     options: {
       plugins: [
         {
           resolve: "gatsby-remark-relative-images",
         },
         {
           resolve: `gatsby-remark-images`,
           options: {
             maxWidth: 590,
           },
         },
       ],
     },
   },

   `gatsby-plugin-sass`,
   `gatsby-transformer-json`,
   {
     resolve: `gatsby-plugin-typography`,
     options: {
       pathToConfigModule: `${__dirname}/src/utils/typography`,
     },
   },
   {
     resolve: `gatsby-plugin-compile-es6-packages`,
     options: {
       modules: [`gatsby-background-image`],
     },
   },

package.json:

{
  "dependencies": {
    "babel-eslint": "^8.2.6",
    "eslint-config-prettier": "^5.0.0",
    "eslint-plugin-graphql": "^3.0.3",
    "gatsby": "^2.9.9",
    "gatsby-background-image": "^0.7.2",
    "gatsby-image": "^2.1.4",
    "gatsby-plugin-compile-es6-packages": "^1.1.0",
    "gatsby-plugin-manifest": "^2.1.1",
    "gatsby-plugin-offline": "^2.1.3",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.2",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.1.5",
    "gatsby-plugin-typography": "^2.2.13",
    "gatsby-remark-images": "^3.0.16",
    "gatsby-remark-relative-images": "^0.2.2",
    "gatsby-source-filesystem": "^2.0.39",
    "gatsby-transformer-json": "^2.1.11",
    "gatsby-transformer-remark": "^2.4.0",
    "gatsby-transformer-sharp": "^2.1.21",
    "intersection-observer": "^0.7.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-typography": "^0.16.19",
    "typography": "^0.16.19"
  },
  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.13.0",
    "prettier": "^1.18.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  
}

gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

[MaximeHeckel]

I updated gatsby-plugin-sharp to ^2.2.10 and it fixed the issue I had with Netlify not loading my “gatsby-images” for my project. Let me know if this helps

[jschlechte]

@juddey – Thanks for the tip! Rolling back to 2.8.8 also resolved this issue for me. I was seeing it on Amazon S3 for every single page prior to the rollback!

I hope this gets a fix soon!