Gatsby: Gatsby inline images not working with markdown

[wbonneville]

Description

Hey everyone, I'm attempting to use inline images in my markdown file using gatsby-remark-images. Unfortunately, the image won't load on my local host. I don't know if it's simply erroneous syntax or I am missing something drastic.

Here's the repo. My config is messy, which is one of the reasons I'm having trouble diagnosing the issue.

https://github.com/wbonneville/gatsby_blog/blob/master/gatsby-config.js

Steps to reproduce

Here's my json package. Everything should be installed.

link works as it should

here's the preview

Expected result

Expecting the image from the markdown file to load in the browser

Actual result

Getting this

Environment

System:
OS: macOS Mojave 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.3 - /usr/local/bin/node
Yarn: 1.19.1 - ~/.yarn/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 78.0.3904.97
Safari: 12.1.1
npmPackages:
gatsby: ^2.17.6 => 2.17.11
gatsby-image: ^2.2.33 => 2.2.33
gatsby-plugin-catch-links: ^2.1.15 => 2.1.16
gatsby-plugin-manifest: ^2.2.25 => 2.2.27
gatsby-plugin-mdx: ^1.0.56 => 1.0.56
gatsby-plugin-offline: ^3.0.17 => 3.0.19
gatsby-plugin-react-helmet: ^3.1.13 => 3.1.14
gatsby-plugin-sass: ^2.1.23 => 2.1.23
gatsby-plugin-sharp: ^2.3.1 => 2.3.1
gatsby-plugin-styled-components: ^3.1.12 => 3.1.12
gatsby-remark-copy-linked-files: ^2.1.30 => 2.1.30
gatsby-remark-images: ^3.1.31 => 3.1.31
gatsby-source-filesystem: ^2.1.35 => 2.1.36
gatsby-transformer-remark: ^2.6.32 => 2.6.33
gatsby-transformer-sharp: ^2.3.5 => 2.3.5
npmGlobalPackages:
gatsby-cli: 2.8.11

[suijaa]

The code is working fine as you expected @wbonneville.

[wbonneville]

The code is working fine as you expected @wbonneville.

This is what I see, hence my bewilderment. :(

[LekoArts]

Thank you for opening this!

Your problem is that you're referencing an image that is relative to your blog posts location. The images inside the blog post will work fine, if you want to use the images in your images folder, you'd need to use something like: https://www.npmjs.com/package/gatsby-remark-relative-images

You can also use some other things to do this:
https://www.byderek.com/post/a-stackoverflow-question--a-use-case-for-gatsbys-field-extension

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[wbonneville]

Thank you for opening this!

Your problem is that you're referencing an image that is relative to your blog posts location. The images inside the blog post will work fine, if you want to use the images in your images folder, you'd need to use something like: https://www.npmjs.com/package/gatsby-remark-relative-images

You can also use some other things to do this:
https://www.byderek.com/post/a-stackoverflow-question--a-use-case-for-gatsbys-field-extension

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

Thanks for answering. I will check out those sources.

However, I get the exact same issue when I use images from inside the blog post. Is there something else?

[LekoArts]

Referencing images in the MD with like [](./my-image.jpg) works fine on my test project.

[wbonneville]

Referencing images in the MD with like [](./my-image.jpg) works fine on my test project.

![test img](./train.png)

That's what I have too, and it's inside the blog post.

[wbonneville]

The issue is solved. Leaving this here in the event someone else finds themselves in a conundrum similar to mine.

I removed gatsby-transformer-remark.

gatsby-transformer-remark was being used instead of gatsby-remark-images, which I had defined already within the config.

[gg-justgiving]

The issue is solved. Leaving this here in the event someone else finds themselves in a conundrum similar to mine.

I removed gatsby-transformer-remark.

gatsby-transformer-remark was being used instead of gatsby-remark-images, which I had defined already within the config.

I think you should actually still include gatsby-transformer-remark otherwise you'll have some issues see this post, on gatsby packages: https://www.gatsbyjs.org/packages/gatsby-remark-images/

do this in your gatsby-config.js file

plugins: [
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },
]