Gatsby: Disable links and box-shadow for images

[schwigri]

Summary

I apologize if this is the wrong place for this question, but after searching around Google I couldn't seem to find any related issues or documentation.

I currently use markdown pages that use <img> tags in them. These work fine, except there two things I don't want and cannot figure out how to disable:

1. Links wrapping images that link to the images
2. An inline, box-shadow style that gives a white background (box-shadow: inset 0 0 400px white)

Is it possible to disable these? My site background is not white, and the images I am using have transparent backgrounds, so it looks very strange. Since the style is inline on the img element, I cannot disable it with CSS.

Relevant information

My setup is as follows:

1. Create a markdown page, and include the image using HTML: <img src="./image.png" alt="Description">

Environment (if relevant)

  System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (2) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 4.4.12 - /bin/bash
  Binaries:
    Node: 12.12.0 - /home/linuxbrew/.linuxbrew/bin/node
    npm: 6.12.0 - /home/linuxbrew/.linuxbrew/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  Browsers:
    Firefox: 60.9.0
  npmPackages:
    gatsby: ^2.16.4 => 2.17.1 
    gatsby-image: ^2.2.29 => 2.2.29 
    gatsby-plugin-feed: ^2.3.19 => 2.3.19 
    gatsby-plugin-mdx: ^1.0.53 => 1.0.53 
    gatsby-plugin-offline: ^3.0.16 => 3.0.16 
    gatsby-plugin-react-helmet: ^3.1.13 => 3.1.13 
    gatsby-plugin-sass: ^2.1.20 => 2.1.20 
    gatsby-plugin-sharp: ^2.2.32 => 2.2.32 
    gatsby-remark-copy-linked-files: ^2.1.28 => 2.1.28 
    gatsby-remark-images: ^3.1.28 => 3.1.28 
    gatsby-remark-prismjs: ^3.3.20 => 3.3.20 
    gatsby-remark-smartypants: ^2.1.14 => 2.1.14 
    gatsby-source-filesystem: ^2.1.33 => 2.1.33 
    gatsby-transformer-remark: ^2.6.30 => 2.6.30 
    gatsby-transformer-sharp: ^2.3.0 => 2.3.0 

File contents (if changed)

gatsby-config.js:

module.exports = {
    siteMetadata: {
        title: `title`,
    },
    plugins: [
        `gatsby-transformer-sharp`,
        'gatsby-image',
        `gatsby-plugin-sharp`,
        // `gatsby-plugin-feed`,
        `gatsby-plugin-offline`,
        `gatsby-plugin-react-helmet`,
        `gatsby-plugin-sass`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${ __dirname }/src/content`,
                name: `content`
            }
        },
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 1220,
                        },
                    },
                    `gatsby-remark-prismjs`,
                    `gatsby-remark-copy-linked-files`,
                    `gatsby-remark-smartypants`,
                ],
            },
        },
    ],
};

package.json: N/A

gatsby-node.js:

const path = require('path');

exports.createPages = async ({ actions, graphql, reporter }) => {
    const { createPage } = actions
    const blogPostTemplate = path.resolve(`src/templates/page.js`)
    const result = await graphql(`
        {
            allMarkdownRemark(
                sort: { order: DESC, fields: [frontmatter___date] }
                limit: 1000
            ) {
                edges {
                    node {
                        frontmatter {
                            path
                        }
                    }
                }
            }
        }
    `)
    // Handle errors
    if (result.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`)
        return
    }
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: node.frontmatter.path,
            component: blogPostTemplate,
            context: {}, // additional data can be passed via context
        })
    })
}

gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[schwigri]

After hours of searching, I've found the solution (add to gatsby-config.js):

{
  resolve: `gatsby-remark-images`,
  options: {
    // Add these options.
    linkImagesToOriginal: false,
    backgroundColor: `transparent`,
  },
},

Hopefully this is helpful to anyone who may be looking.