gatsby-remark-images not displaying images with gatsby-plugin-mdx

dfrkp commented 1 year ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I struggled getting images to work in my project so I started from scratch, but inline mdx images are not working there either, hence opening the ticket here.

Reproduction Link

none

Steps to Reproduce

npm init gatsby (select MDX support)
npm install gatsby-remark-images
add mdx file with link to image
npm run develop

sample.mdx:

![../images/icon.png](../images/icon.png)

![./icon.png](./icon.png)

Sample gatsby-config:

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: `My Gatsby Site`,
    siteUrl: `https://www.yourdomain.tld`
  },
  // 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,
  plugins: [
    "gatsby-plugin-mdx", {
      resolve: 'gatsby-source-filesystem',
      options: {
    "name": "pages",
    "path": "./src/pages/"
      },
      __key: "pages"
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
        ],
      },
    },
  ]
};

export default config;

Expected Result

Image is displayed

Actual Result

Alt text is displayed rather than image

Environment

System:
    OS: macOS 13.5.2
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 20.6.0 - /opt/homebrew/bin/node
    npm: 9.8.1 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.6
  npmPackages:
    gatsby: ^5.12.4 => 5.12.4
    gatsby-plugin-mdx: ^5.12.0 => 5.12.0
    gatsby-remark-images: ^7.12.0 => 7.12.0
    gatsby-source-filesystem: ^5.12.0 => 5.12.0

Config Flags

none

khaled4dev commented 1 year ago

HI, @dfrkp , please follow https://www.gatsbyjs.com/docs/how-to/routing/mdx/ , it will help you to get images from MDX file. If still not fix , please share your code or Production link .

dfrkp commented 1 year ago

@khaled4dev , thank you for the reply! I have already followed that. Because the issue persisted, I now moved on to ditch gatsby in favor of vike (https://vike.dev/) which also gives me a few other benefits (incl. working images ;) ).

hisuwh commented 3 months ago

I'm seeing the same issue intermittently and with linkImagesToOriginal: true I'm seeing even weirder behaviour:

some images don't render and display alt text
some images display but link goes to a 404
some images display and link works

hisuwh commented 3 months ago

Further to my comment the issue I'm seeing only presents for gatsby develop when building with gatsby build it works as expected

hisuwh commented 3 months ago

Actually running gatsby clean fixed my issue 👍

gatsbyjs / gatsby