Gatsby markdown-remark-images are not shown

Question

I am using Gatsby for my personal blog. I create content by markdown files, which works . I wanna have images within my content by using markdown syntax ![My Image](./myImage.png).

myImage.png is living within the same folder as the .md file:

I don't know why it is not working. Does anyone has one suggestion for me please?

I tried it with these syntaxes:

![1](./myImage.png)
![2](./blog/Software/musiker-software/myImage.png)
![3](/blog/Software/musiker-software/myImage.png)
![4](myImage.png)
![5](/myImage.png)

This is my file structure

/content
  /blog
    /category
       /blogcontent
         article.md
         myImage.png

This is my gatsby-config.js file (same order):

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/content/blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
 {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-vscode`,
            options: {
              theme: {
                default: "Dark+ (default dark)",
              },
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-mdx`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
              withWebp: true,
              showCaptions: true,
              quality: 100,
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-video",
            options: {
              width: 550,
              related: true,
              noIframeBorder: true,
              containerClass: "embedVideo-container"
            },
          },
        ],
      },
    },

This is the HTML output:

<img src="./myImage.png" alt="1">
<img src="./blog/Software/musiker-software/myImage.png" alt="2">
<img src="/blog/Software/musiker-software/myImage.png" alt="3">
<img src="myImage.png" alt="4">
<img src="/myImage.png" alt="5">

Answer 1

Ok I got it:

It was that gatsby-transformer-remark was declared twice, so the lower one was overriding the upper one. I merged that two so now it's working:

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 1200,
        },
      },
      {
        resolve: `gatsby-remark-vscode`,
        options: {
          theme: {
            default: "Dark+ (default dark)",
          },
        },
      },
      {
        resolve: "gatsby-remark-embed-video",
        options: {
          width: 550,
          related: true,
          noIframeBorder: true,
          containerClass: "embedVideo-container"
        },
      },
    ],
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-mdx`,