Gatsby Remark Images not working for inline images

Question

Here are other answers that have not worked for me:

• gatsby remark images does not display image
• Inline images not loading from body of the markdown file in GatsbyJS
• https://github.com/gatsbyjs/gatsby/issues/6698

The images are being rendered, and can even be accessed via the url, but the img src attribute is not being rewritten to the proper static link.

In my markdown

![Palmettos](./palmettos.jpg)

The resulting html

<img src="./palmettos.jpg" alt="Palmettos"></img>

The actual image renders in the browser at http://localhost:8000/static/8edfbf87ca46c4dc31640e0b93494b4f/ced80/palmettos.webp

My config:

module.exports = {
  siteMetadata: {
    title: "Standingwater",
    siteUrl: "https://standingwater.io"
  },
  plugins: [
    "gatsby-plugin-styled-components",
    "gatsby-plugin-image",
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-react-svg",
      options: {
        rule: {
          include: /assets/
        }
      }
    },
    {
      resolve: "gatsby-transformer-remark",
      plugins: [
        {
          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1200,
          }
        },
        "gatsby-remark-emoji"
      ]
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    "gatsby-plugin-fontawesome-css",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "pages",
        path: "./src/pages/",
      },
      __key: "pages",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "posts",
        path: "./src/markdown/posts/",
      },
      __key: "posts",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "projects",
        path: "./src/markdown/projects/",
      },
      __key: "projects",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "current",
        path: "./src/markdown/current/",
      },
      __key: "current",
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "hobbies",
        path: "./src/markdown/hobbies/",
      },
      __key: "hobbies",
    },
  ],
};

The entire site is opensource at mas-4/standingwater.

I have tried everything I've found on the internet and none of the solutions seem to work, and quite often they seem to suggest flaky solutions. I'm really not even sure how to debug this particular one. Any help would be super appreciated.

Answer 1

The solution was frustratingly simple:

My original config said

    {
      resolve: "gatsby-transformer-remark",
      plugins: [
        {
          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1200,
          }
        },
        "gatsby-remark-emoji"
      ]
    },

But this was wrong. It should have said:

    {
      resolve: "gatsby-transformer-remark",
      options: { // should be wrapped in options
        plugins: [
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 5000,
              withWebp: true,
              showCaptions: true,
              quality: 100,
            },
          },
          "gatsby-remark-emoji",
        ],
      }
    },

Answer 2

I've also found it impossible to resolve this issue. Been through a whole load of solutions, none of which have worked.

However, when I do a gatsby build I get an "unspecified error - aborting" and this appears:

** (process:18112): WARNING **: 23:11:01.908: smartcrop: no property named `premultiplied'
This query took more than 15s to run — which might indicate you're querying too much or have some unoptimized code:
File path: src/pages/blog/{mdx.frontmatter__slug}.js?__contentFilePath=gat
sby/magazine/blog/2023-summer/yet-another-post.mdx
URL path: /blog/yet-another-post/ 

When I take the image out of the markdown it builds fine.

Answer 3

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.