Gatsby: [gatsby-remark-images] gif and svg images aren't recognized/rendered

[alisonjoseph]

Description

I'm trying to use gatsby-remark-images to display images from my markdown files. png works fine gif and svg don't seem to be recognized.

Steps to reproduce

Expected result

All image types render correctly

Actual result

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    Yarn: 1.9.2 - /usr/local/bin/yarn
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 52.9.0
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.247 => 1.9.277
    gatsby-image: ^1.0.55 => 1.0.55
    gatsby-link: ^1.6.40 => 1.6.46
    gatsby-plugin-react-helmet: ^2.0.10 => 2.0.11
    gatsby-plugin-sass: ^1.0.26 => 1.0.26
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-remark-images: ^1.5.66 => 1.5.67
    gatsby-remark-responsive-image: ^1.0.0-alpha13-alpha.435e0178 => 1.0.0-alpha13-alpha.435e0178
    gatsby-source-filesystem: ^1.5.38 => 1.5.39
    gatsby-transformer-remark: ^1.7.44 => 1.7.44
    gatsby-transformer-sharp: ^1.6.27 => 1.6.27
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Carbon Design System',
  },
  plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'content',
        path: `${__dirname}/src/content/`,
      },
    },
    {
      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,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
  ],
};

package.json:

{
  "name": "carbon-website-gatsby",
  "description": "Carbon Design System website",
  "version": "1.0.0",
  "author": "Mari Johannessen <[email protected]>",
  "dependencies": {
    "@storybook/addon-info": "^3.4.7",
    "carbon-components": "^9.6.1",
    "carbon-components-react": "6.18.3",
    "carbon-icons": "^7.0.7",
    "classnames": "^2.2.6",
    "fs": "0.0.1-security",
    "gatsby": "^1.9.247",
    "gatsby-image": "^1.0.55",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-react-helmet": "^2.0.10",
    "gatsby-plugin-sass": "^1.0.26",
    "gatsby-plugin-sharp": "^1.6.48",
    "gatsby-remark-images": "^1.5.66",
    "gatsby-source-filesystem": "^1.5.38",
    "gatsby-transformer-remark": "^1.7.44",
    "gatsby-transformer-sharp": "^1.6.27",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.1",
    "react-copy-to-clipboard": "^5.0.1",
    "react-ga": "^2.5.3",
    "react-helmet": "^5.2.0",
    "rehype-react": "^3.0.2"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "dev": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook:build": "build-storybook -c .storybook -o public/docs"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.7",
    "@storybook/addon-knobs": "^3.4.7",
    "@storybook/addon-options": "^3.4.7",
    "@storybook/react": "^3.4.7",
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.1",
    "node-sass": "^4.9.0",
    "prettier": "^1.12.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "sass-loader": "^7.0.3",
    "storybook-readme": "^3.3.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

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

[alisonjoseph]

Was just looking through the source code for gatsby-remark-images and saw this, assuming this measn it's not possible to use this for these files types.

                // Ignore gifs as we can't process them,
                // svgs as they are already responsive by definition

                if (!(isRelativeUrl(node.url) && fileType !== `gif` && fileType !== `svg`)) {
                  _context2.next = 9;
                  break;
                }

[KyleAMathews]

Yeah correct. You'll want to add https://www.gatsbyjs.org/packages/gatsby-remark-copy-linked-files/?=copy- in addition to gatsby-remark-images. gatsby-remark-images is just for resizing images and since we can't resize gif or svgs, those aren't handled.

[alisonjoseph]

Thanks @KyleAMathews 👍

[bytrangle]

The Gatsby doc didn't mention anything about using the gatsby-remark-copy-linked-files plugin. It just said that using an inline Gif in Markdown is the same as a static image. I couldn't do that without using the plugin above. Did I miss something?