Gatsby Remark Images not working for inline images

Question

Here are other answers that have not worked for me:

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.

Have you tried changing the relativity of your paths? Like `./../palmettos.jpg`, etc — Ferran Buireu, Jul 22 '21 at 16:18
Originally the images were in a subdirectory within the posts directory titled `images`and I was referencing `./images/palmettos.jpg`. I'm curious why `./../palmettos.jpg` though because the image lives in the same directory as the markdown file. Worth a try though. — mas, Jul 22 '21 at 17:23

score 1 · Answer 1 · answered Dec 05 '21 at 03:13

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.

score 0 · Accepted Answer · answered Jul 27 '21 at 16:22

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",
        ],
      }
    },

score 0 · Answer 3 · answered Jul 20 '23 at 22:16

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.

Gatsby Remark Images not working for inline images

3 Answers3