Matching algorithm for markdown images doesn't work

[tbntdima]

Hi, I was trying to use your plugin, but it was not working for me. So that's how I came up here 🙂 There is one part in the code that confuses me here.

const imagePath = slash(path.join(parentDirectory, node.url))
// See if there is a matching file path from gatsby-source-filesystem
const imageNode = _.find(files, file => {
   return slash(path.normalize(file.absolutePath)) === imagePath;
});

I have the following folders structure: -content

• blog
  • post.md
    • static
• images
  • avatar.jpg

With this confition, imagePath would be content/blog/images/avatar.jpg. And file of that image woule be static/images/avatar.jpg. From my understanding, these two things will never be the same. And imageNode will always be undefined. Could you please correct me if I'm wrong?

[danielmahon]

@dmitriyaa I am having trouble reproducing this problem. It seems as if the matching is working as intended. Do you have your static/images folder defined in gatsby-config.js?

    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/images`,
        name: 'uploads',
      },
    },

The imagePath and matching slash(path.normalize(file.absolutePath)) return absolute paths on your system so for example running local on macOS you might get:

gatsby-config.js

    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/img`,
        name: 'images',
      },
    },

src/pages/blog/blog-post-1.md

frontmatter
---
![coffee](../../img/social/coffee.png)

returns an imagePath of: /Users/me/Projects/gatsby-remark-relative-images/example/src/img/social/coffee.png

and a matching paths provided by gatsby-source-filesystem

...
/Users/me/Projects/gatsby-remark-relative-images/example/src/img/github-icon.svg
/Users/me/Projects/gatsby-remark-relative-images/example/src/img/logo.svg
/Users/me/Projects/gatsby-remark-relative-images/example/src/img/social/coffee.png

the last path will match exactly, do I dont think there is a need for using endsWith

[tbntdima]

Hi @danielmahon, but netlify CMS does not provide us with a relative path like here:

frontmatter
---
![coffee](../../img/social/coffee.png)

it will be

frontmatter
---
![coffee](/img/coffee.png)

so the imagePath will be /Users/me/Projects/gatsby-remark-relative-images/example/src/pages/blog/img/coffee.png

and for me matching path provided by gatsby-source-filesystem is:

/Users/me/Projects/gatsby-remark-relative-images/example/static/images/coffee.png

I can create a repo to reproduce it, if the above doesn't make sense.

[tbntdima]

@danielmahon, I think that's also what is causing issue on #31 🤔 I haven't used Netlify CMS before, maybe the way paths are generated has changed.

[koss-lebedev]

@danielmahon Can confirm that the issue exists and that PR resolves it.

As @dmitriyaa mentioned, when you add an image to markdown file using Netlify CMS, it saves it with the path relative to the location of that markdown file, but the path matching algorithm will try to resolve it relative to the root project directory, so we'll get a broken link.