Gatsby: Gatsby remark images not working with markdown 😭

[philiplackmaker]

Description

I am trying to pull images down from my markdown into my project. I have seen this issue on another bug. -> https://github.com/gatsbyjs/gatsby/issues/6698. I walked through the steps to fix it with a migration from v1 to v2. Unfortunately, it has not fixed it. Its getting really frustrating as I can't seem to understand why it is not working. Images do work from the frontmatter but not from the HTML

Steps to reproduce

This is the current set up

Expected result

The image to be pulled into the template

Actual result

What happened.

Environment

System:
OS: macOS High Sierra 10.13.1
CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 9.2.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.3.0 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.84
Firefox: 57.0
Safari: 11.0.1
npmPackages:
gatsby: ^2.0.0-beta.66 => 2.0.0-beta.66
gatsby-image: ^2.0.0-beta.7 => 2.0.0-beta.7
gatsby-link: ^2.0.0-beta.6 => 2.0.0-beta.6
gatsby-plugin-netlify: ^1.0.21 => 1.0.21
gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1
gatsby-plugin-react-helmet: ^3.0.0-beta.4 => 3.0.0-beta.4
gatsby-plugin-sass: ^2.0.0-beta.6 => 2.0.0-beta.6
gatsby-plugin-sharp: ^2.0.0-beta.7 => 2.0.0-beta.7
gatsby-plugin-styled-components: ^3.0.0-beta.3 => 3.0.0-beta.3
gatsby-remark-copy-linked-files: ^2.0.0-beta.3 => 2.0.0-beta.3
gatsby-remark-emojis: ^0.2.3 => 0.2.3
gatsby-remark-images: ^2.0.1-beta.9 => 2.0.1-beta.9
gatsby-source-filesystem: ^2.0.1-beta.10 => 2.0.1-beta.10
gatsby-transformer-remark: ^2.1.1-beta.5 => 2.1.1-beta.5
gatsby-transformer-sharp: ^2.1.1-beta.6 => 2.1.1-beta.6
npmGlobalPackages:
gatsby-cli: 1.1.58

Please help as I am soooooooo stuck!

[philiplackmaker]

Oh this is the repo -> https://github.com/philiplackmaker/folio-2018/tree/migratiom-v1-v2

[LekoArts]

@philiplackmaker You're missing a bunch of closing brackets.
I'd recommend using Prettier/ESLint to format your code and catch those errors.

Fixed version:

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-sass`,
    `gatsby-remark-copy-linked-files`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // In your gatsby-transformer-remark plugin array
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1080,
            },
          },
          {
            resolve: 'gatsby-remark-emojis',
            options: {
              // Deactivate the plugin globally (default: true)
              active: true,
              // Add a custom css class
              class: 'emoji-icon',
              // Select the size (available size: 16, 24, 32, 64)
              size: 64,
              // Add custom styles
              styles: {
                display: 'inline',
                margin: '0',
                'margin-top': '1px',
                position: 'relative',
                top: '5px',
                width: '25px',
              },
            },
          },
        ],
      },
    },
  ],
};

[philiplackmaker]

@LeKoArts Thanks so much! It worked. 💯

[LekoArts]

Great. If you need help with setting up ESLint/Prettier feel free to contact me!