[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?

[joshua7v]

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?

I'm dealing with this issue as well.
from my understanding, what gatsby doc said is correct, there is no difference between gif or png
however, that just means

![alt](images/a.png)
![alt](images/a.git)

will be turned into something like

<img src="images/a.png">
<img src="images/a.gif">

no difference in this part

to show the image correctly, you need to ensure the path is right (images/a.gif in this case)
but we might put images anywhere relative to markdown itself,
so the plugin gatsby-remark-copy-linked-files will help you to patch the path
or you can patch the path yourself before rendering to html

[Piemontez]

Same proble for me. Gif isn´t recognized on MD file.

MD file:

---
title: 'Overview'
description: 'OpenCV-Flow Overview'
---

![OpenCV-Flow](./assets/overview.gif)
![OpenCV-Flow](./assets/overview.webp)

Images tag ouput:

  <img src="./assets/overview.gif" alt="OpenCV-Flow" class="css-0" />
  <img class="gatsby-resp-image-image css-0" alt="OpenCV-Flow" title="OpenCV-Flow"
        src="/static/d1e767a8c2e243e4e7a0e25df4abc4ca/e88ff/overview.webp"
        srcset="
          /static/d1e767a8c2e243e4e7a0e25df4abc4ca/eb777/overview.webp 176w,
          /static/d1e767a8c2e243e4e7a0e25df4abc4ca/edd59/overview.webp 352w,
          /static/d1e767a8c2e243e4e7a0e25df4abc4ca/e88ff/overview.webp 600w
        "
        sizes="(max-width: 600px) 100vw, 600px"
        loading="lazy" />

Note that in the first case Gatsby copied the same path from the MD code and because of that it did not display the image.