gatsby-remark-images strips imgs from gatsby-source-contentful markdown

[brandonmp]

I wired up the contentful source plugin to fetch some blog content, but it's unclear to me how to handle the post body.

I assumed I could just grab the html prop from the childMarkdownRemark field in the body, but the html therein doesn't include <img> tags. Here's an example:

// query
{
  allContentfulBlogPostBodyTextNode {
    edges {
      node {
        body
        childMarkdownRemark {
          html
        }
      }
    }
  }
}

// result
{
  "data": {
    "allContentfulBlogPostBodyTextNode": {
      "edges": [
        {
          "node": {
            "body": "Hi this is markdown \n\n[link test](https://www.google.com)\n\n![favicon](//images.contentful.com/l4pq4svxc9sb/4DZvoAxkxOKwyS6WGSIsQW/fb4225074847be1e46e655cf25283e2f/favicon.png)",
            "childMarkdownRemark": {
              "html": "<p>Hi this is markdown </p>\n<p><a href=\"https://www.google.com\">oh u want imgs here </a></p>\n<p></p>"
            }
          }
        }
      ]
    }
  }
}

Is this a bug, or si there another way to fetch the rendered html?

[KyleAMathews]

What's your gatsby-config.js look like?

This could be a bug… nothing like this has been reported though yet.

[KyleAMathews]

Remark is parsing it just fine https://astexplorer.net/#/gist/0a92bbf654aca4fdfb3f139254cf0bad/ffe102014c188434c027e43661dbe6ec30042ee2

[brandonmp]

here's the contentful plugin:

{
            resolve: `gatsby-source-contentful`,
            options: {
                spaceId: `etc`,
                accessToken: `redactastic`
            }
        },

and full shebang:

module.exports = {
    siteMetadata: {
        author: 'me',
        title: 'my site'
    },
    plugins: [
        'gatsby-transformer-sharp',
        'gatsby-transformer-json',
        'gatsby-plugin-resolve-src',
        'gatsby-plugin-catch-links',
        'gatsby-plugin-offline',
        {
            resolve: `gatsby-source-contentful`,
            options: {
                spaceId: `etc`,
                accessToken: `secret`
            }
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                path: `${__dirname}/content/agencies/`,
                name: 'agencies'
            }
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                path: `${__dirname}/content/consultants/`,
                name: 'consultants'
            }
        },
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    {
                        resolve: 'gatsby-remark-images',
                        options: {
                            maxWidth: 740,
                            linkImagesToOriginal: false
                        }
                    }
                ]
            }
        },
        'gatsby-plugin-sharp',
        'gatsby-plugin-react-helmet',
        'gatsby-plugin-antd',
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography.js`
            }
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                short_name: '--',
                name: '--',
                icons: [
               /// etc etc
                ],
                display: 'standalone',
                background_color: '#ffffff',
                theme_color: '#7CD8D5'
            }
        }
    ]
};

[brandonmp]

ah-hah, removing the gatsby-remark-images plugin from gatsby-transformer-remark did the trick.

is that a bug? I'll update title & just close it if it isn't

[KyleAMathews]

Aha!

Yeah… at the moment it only handles local image files so at the very least it should degrade more gracefully if it can't find the linked file.

@Khaledgarbaya mentioned a while ago about creating a similar plugin to gatsby-remark-images (gatsby-remark-contentful-images) that would create responsive images using Contentful's image api. So that'd be ideal to have for this use case but in the meantime yeah, just remove gatsby-remark-images.

[KyleAMathews]

Let's leave it up open as a bug to make gatsby-remark-images not strip images from markdown if it can't transform them.

[Khaledgarbaya]

👋 I have the code in a branch and will try to find some time for it soon

[m4rrc0]

For reference: #1502

[KyleAMathews]

Let's close this in favor of #1502 as both issues should be solved at the same time.