Static image does not render in production

[krrnk]

Hello,
Apologies if this is a duplicate.
I have an issue with gatsby-plugin-image. I just want to render a static image. The image renders in development and when testing the build locally. However, when deploying the site in production the image never renders. There's just a placeholder of the size of the image.

Here is the test code I am using:

import * as React from "react"
import type {HeadFC, PageProps} from "gatsby"
import {StaticImage} from "gatsby-plugin-image"

const Kitten = () => {
  return <StaticImage src="https://placekitten.com/800/600" alt="A kitten" />
}
const IndexPage: React.FC<PageProps> = () => {
  return (
    <main >
      <Kitten />
    </main>
  )
}

export default IndexPage

export const Head: HeadFC = () => <title>Test</title>

My config file:

import type {GatsbyConfig} from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: `test`,
    siteUrl: `https://www.krrnk.com`
  },
  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
  // If you use VSCode you can also use the GraphQL plugin
  // Learn more at: https://gatsby.dev/graphql-typegen
  graphqlTypegen: true,
  pathPrefix: `/test`,
  plugins: [`gatsby-plugin-styled-components`, "gatsby-plugin-image", "gatsby-plugin-sitemap", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "images",
      "path": "./src/images/"
    },
    __key: "images"
  }]
};

export default config;

The test version:
https://krrnk.com/test/

I get the following error in the browser console, but I don't know what is the right way to solve it.
The resource from “https://krrnk.com/test/webpack-runtime-230597b55d36a6e91c4c.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Anyone up to give me hand?
Thank you very much!

[gh640]

@krrnk

The resource from “https://krrnk.com/test/webpack-runtime-230597b55d36a6e91c4c.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Is there webpack-runtime-230597b55d36a6e91c4c.js in the test directory you deployed? What are in test directory in your production environment? My guess is that the prefix is not be set properly.

I don't know what you actually did but you need to run gatsby build with --prefix-paths or PREFIX_PATHS=true.

gatsby build --prefix-paths
# or
PREFIX_PATHS=true gatsby build

The doc page for pathPrefix:

• https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/

Can you share your package.json and actual commands you ran to test the build locally? Or, can you provide a minimal reproduction? people will be able to help more easily with more detailed information :)

[krrnk]

Hello,

first of all, thank you for taking time to reply to my question.
I am running the build and serve commands as
npm run build --prefix-paths
npm run serve --prefix-paths
There is a webpack-runtime-xxxxxx.js file in my directory.
I have made a small repo for you to test: https://gitlab.com/krrnk/test.git
These are the contents of package.json:

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "description": "test",
  "author": "Sanchez Camilo",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "gatsby": "^5.9.0",
    "gatsby-cli": "^5.9.0",
    "gatsby-plugin-image": "^3.9.0",
    "gatsby-plugin-sharp": "^5.9.0",
    "gatsby-plugin-sitemap": "^6.9.0",
    "gatsby-source-filesystem": "^5.9.0",
    "gatsby-transformer-sharp": "^5.9.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^18.15.13",
    "@types/react": "^18.0.38",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.0.4"
  }
}

[gh640]

@krrnk

Thank you for your reply. I could reproduce the problem :)

I guess the --prefix-paths is not passed to gatsby xxx with the commands. We need to put -- before any options like:

npm run build -- --prefix-paths
npm run serve -- --prefix-paths

Any positional arguments are passed to the specified script. Use -- to pass --prefixed flags and options which would otherwise be parsed by npm.

―― npm-run-script | npm Docs

You can check how the target script is run in the stdout:

Without --:

npm run build --prefix-paths

> [email protected] build
> gatsby build

With --:

npm run build -- --prefix-paths

> [email protected] build
> gatsby build --prefix-paths

If you use --prefix-paths frequently, adding dedicated scripts like the following might be useful:

    "build-with-prefix": "gatsby build --prefix-paths",

[krrnk]

Hello!

Thanks for the answer, the commands

npm run build -- --prefix-paths
npm run serve -- --prefix-paths

totally worked! I did not now about the -- and it is quite useful information.

Thank you!