title: Gatsby site isn't rendering gifs
body: <h2>Summary</h2>
  <p>Hello, I come asking for help – I've spent two whole days now trying to figure it out now.
  I can't seem to crack how to get gifs to load on my site. (I'm pretty new to coding so forgive me if this something obvious)</p>
  <p>js location: src/page/volvic</p>
  <p><strong>bring them in like so:</strong>
  import volvic from &quot;../../content/assets/projects/volic.gif&quot;</p>
  <p><strong>and call it like so:</strong>
  <code>&lt;img src={volvic} /&gt;</code></p>
  <p><strong>gives me this error:</strong>
  <em>(terminal)</em></p>
  <pre><code>ERROR #98123 WEBPAC
  Generating development JavaScript bundle failed
  Unexpected character '' (1:6)
  File: content/assets/projects/volvic.gif:1:6
  </code></pre>
  <p>–––––
  <em>(localhost)</em></p>
  <p><code>./content/assets/projects/volvic.gif 1:6Module parse failed: Unexpected character '' (1:6)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders(Source code omitted for this binary file)</code></p>
  <p>Can someone point me the right direction please, any help would be greatly appreciated.</p>
  <h3>Environment (if relevant)</h3>
  <p><a href="https://github.com/supnim/new-port" rel="nofollow noreferrer">https://github.com/supnim/new-port</a> - repo</p>
  <pre><code>    OS: macOS 10.16
      CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.4.0 - /usr/local/bin/node
      npm: 6.14.5 - /usr/local/bin/npm
    Languages:
      Python: 2.7.16 - /usr/bin/python
    Browsers:
      Chrome: 81.0.4044.138
      Safari: 14.0
    npmPackages:
      gatsby: ^2.23.4 =&gt; 2.23.4
      gatsby-image: ^2.4.12 =&gt; 2.4.12
      gatsby-plugin-feed: ^2.5.5 =&gt; 2.5.5
      gatsby-plugin-google-analytics: ^2.3.4 =&gt; 2.3.4
      gatsby-plugin-manifest: ^2.4.11 =&gt; 2.4.11
      gatsby-plugin-netlify: ^2.3.5 =&gt; 2.3.5
      gatsby-plugin-offline: ^2.1.0 =&gt; 2.2.10
      gatsby-plugin-postcss: ^2.3.4 =&gt; 2.3.4
      gatsby-plugin-purgecss: ^3.1.1 =&gt; 3.1.1
      gatsby-plugin-react-helmet: ^3.3.4 =&gt; 3.3.4
      gatsby-plugin-react-svg: ^3.0.0 =&gt; 3.0.0
      gatsby-plugin-sass: ^2.3.4 =&gt; 2.3.4
      gatsby-plugin-sharp: ^2.6.17 =&gt; 2.6.17
      gatsby-plugin-smoothscroll: ^1.1.0 =&gt; 1.1.0
      gatsby-plugin-web-font-loader: ^1.0.4 =&gt; 1.0.4
      gatsby-remark-copy-linked-files: ^2.3.10 =&gt; 2.3.10
      gatsby-remark-embed-video: ^2.0.1 =&gt; 2.0.1
      gatsby-remark-images: ^2.0.6 =&gt; 2.0.6
      gatsby-remark-prismjs: ^3.5.4 =&gt; 3.5.4
      gatsby-remark-responsive-iframe: ^2.4.5 =&gt; 2.4.5
      gatsby-remark-smartypants: ^2.3.4 =&gt; 2.3.4
      gatsby-source-filesystem: ^2.3.11 =&gt; 2.3.11
      gatsby-transformer-remark: ^2.8.16 =&gt; 2.8.16
      gatsby-transformer-sharp: ^2.5.10 =&gt; 2.5.10
    npmGlobalPackages:
      gatsby-cli: 2.12.58
  </code></pre>
  <h3>File contents (if changed)</h3>
  <p><strong>gatsby-config.js:</strong></p>
  <blockquote>
  <pre><code>const siteConfig = require(&quot;./siteConfig&quot;);
  
  //ive just added this
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            &quot;file-loader&quot;,
            {
              loader: &quot;image-webpack-loader&quot;,
              options: {
                bypassOnDebug: true, // webpack@1.x
                disable: true // webpack@2.x and newer
              }
            }
          ]
        }
      ]
    }
  };
  module.exports = {
    siteMetadata: {
      title: siteConfig.name,
      author: siteConfig.author,
      description: siteConfig.description,
      siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
      social: {
        twitter: siteConfig.twitter
      }
    },
  
    plugins: [
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: `${__dirname}/content/blog`,
          name: `blog`
        }
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: `${__dirname}/content/assets`,
          name: `assets`
        }
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: `${__dirname}/content/assets/photography`,
          name: `photography`
        }
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: `${__dirname}/content/assets/heros`,
          name: `heros`
        }
      },
      {
        resolve: `gatsby-transformer-remark`,
        options: {
          plugins: [
            {
              resolve: `gatsby-remark-images`,
              options: {
                maxWidth: 1360,
                withWebp: true,
                showCaptions: true,
                quality: 75,
                wrapperStyle: `margin: 7vw 0;`
              }
            },
            {
              resolve: &quot;gatsby-remark-embed-video&quot;,
              options: {
                width: 800,
                height: 450,
                related: false,
                noIframeBorder: true,
                allowfullscreen: true
              }
            },
  
            {
              resolve: `gatsby-remark-responsive-iframe`,
              options: {
                wrapperStyle: `margin-bottom: 1.0725rem`
              }
            },
            {
              resolve: `gatsby-transformer-remark`,
              options: {
                plugins: [`gatsby-remark-responsive-iframe`]
              }
            },
            `gatsby-remark-prismjs`,
            `gatsby-remark-copy-linked-files`,
            `gatsby-remark-smartypants`
          ]
        }
      },
      `gatsby-transformer-sharp`,
      `gatsby-plugin-sharp`,
      `gatsby-remark-embed-video`,
      `gatsby-remark-responsive-iframe`,
      {
        resolve: `gatsby-plugin-postcss`,
        options: {
          postCssPlugins: [
            require(&quot;postcss-easy-import&quot;)(),
            require(&quot;postcss-custom-properties&quot;)({ preserve: false }),
            require(&quot;postcss-color-function&quot;)(),
            require(&quot;autoprefixer&quot;)({ browsers: [&quot;last 2 versions&quot;] })
          ]
        }
      },
      {
        resolve: `gatsby-plugin-purgecss`,
        options: {
          printRejected: true // Print removed selectors and processed file names
          // develop: true, // Enable while using `gatsby develop`
          // tailwind: true, // Enable tailwindcss support
          // whitelist: ['whitelist'], // Don't remove this selector
          // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
          // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
        }
      },
      {
        resolve: `gatsby-plugin-google-analytics`,
        options: {
          trackingId: `-`
        }
      },
      `gatsby-plugin-feed`,
      {
        resolve: `gatsby-plugin-manifest`,
        options: {
          name: siteConfig.name,
          short_name: siteConfig.shortName,
          start_url: siteConfig.prefix,
          background_color: `#ffffff`,
          theme_color: `#663399`,
          display: `minimal-ui`,
          icon: `content/assets/sup.png`
        }
      },
      {
        resolve: &quot;gatsby-plugin-react-svg&quot;,
        options: {
          rule: {
            include: /assets/ // See below to configure properly
          }
        }
      },
      `gatsby-plugin-netlify`,
      `gatsby-plugin-offline`,
      `gatsby-plugin-react-helmet`,
      `gatsby-plugin-sass`,
      `gatsby-plugin-smoothscroll`
    ]
  };
  </code></pre>
  </blockquote>
  <p><strong><code>package.json:</code></strong></p>
  <blockquote>
  <pre><code>  &quot;name&quot;: &quot;supnim.com&quot;,
    &quot;private&quot;: true,
    &quot;description&quot;: &quot;Product designer based in London&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;author&quot;: &quot;Nimesh Reghunandanan &lt;hello@supnim.com&gt;&quot;,
    &quot;bugs&quot;: {
      &quot;url&quot;: &quot;https://github.com/ImedAdel/gatsby-london/issues&quot;
    },
    &quot;dependencies&quot;: {
      &quot;acorn&quot;: &quot;^7.3.1&quot;,
      &quot;acorn-dynamic-import&quot;: &quot;^4.0.0&quot;,
      &quot;core-js&quot;: &quot;^3.6.5&quot;,
      &quot;framer&quot;: &quot;^1.2.3&quot;,
      &quot;framer-motion&quot;: &quot;^1.11.1&quot;,
      &quot;gatsby&quot;: &quot;^2.23.4&quot;,
      &quot;gatsby-image&quot;: &quot;^2.4.12&quot;,
      &quot;gatsby-plugin-feed&quot;: &quot;^2.5.5&quot;,
      &quot;gatsby-plugin-google-analytics&quot;: &quot;^2.3.4&quot;,
      &quot;gatsby-plugin-manifest&quot;: &quot;^2.4.11&quot;,
      &quot;gatsby-plugin-netlify&quot;: &quot;^2.3.5&quot;,
      &quot;gatsby-plugin-offline&quot;: &quot;^2.1.0&quot;,
      &quot;gatsby-plugin-postcss&quot;: &quot;^2.3.4&quot;,
      &quot;gatsby-plugin-purgecss&quot;: &quot;^3.1.1&quot;,
      &quot;gatsby-plugin-react-helmet&quot;: &quot;^3.3.4&quot;,
      &quot;gatsby-plugin-react-svg&quot;: &quot;^3.0.0&quot;,
      &quot;gatsby-plugin-sass&quot;: &quot;^2.3.4&quot;,
      &quot;gatsby-plugin-sharp&quot;: &quot;^2.6.17&quot;,
      &quot;gatsby-plugin-smoothscroll&quot;: &quot;^1.1.0&quot;,
      &quot;gatsby-plugin-web-font-loader&quot;: &quot;^1.0.4&quot;,
      &quot;gatsby-remark-copy-linked-files&quot;: &quot;^2.3.10&quot;,
      &quot;gatsby-remark-embed-video&quot;: &quot;^2.0.1&quot;,
      &quot;gatsby-remark-images&quot;: &quot;^2.0.6&quot;,
      &quot;gatsby-remark-prismjs&quot;: &quot;^3.5.4&quot;,
      &quot;gatsby-remark-responsive-iframe&quot;: &quot;^2.4.5&quot;,
      &quot;gatsby-remark-smartypants&quot;: &quot;^2.3.4&quot;,
      &quot;gatsby-source-filesystem&quot;: &quot;^2.3.11&quot;,
      &quot;gatsby-transformer-remark&quot;: &quot;^2.8.16&quot;,
      &quot;gatsby-transformer-sharp&quot;: &quot;^2.5.10&quot;,
      &quot;jshint&quot;: &quot;^2.11.1&quot;,
      &quot;motion&quot;: &quot;^5.0.0-beta26&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;open&quot;: &quot;^7.0.4&quot;,
      &quot;path&quot;: &quot;^0.12.7&quot;,
      &quot;prismjs&quot;: &quot;^1.20.0&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-helmet&quot;: &quot;^5.2.1&quot;,
      &quot;react-icons&quot;: &quot;^3.10.0&quot;,
      &quot;react-images&quot;: &quot;^1.1.7&quot;,
      &quot;react-photo-gallery&quot;: &quot;^8.0.0&quot;,
      &quot;react-refresh&quot;: &quot;^0.8.3&quot;,
      &quot;sharp&quot;: &quot;^0.25.4&quot;,
      &quot;stream&quot;: &quot;0.0.2&quot;,
      &quot;tsutils&quot;: &quot;^3.17.1&quot;,
      &quot;typescript&quot;: &quot;^3.9.5&quot;,
      &quot;url-join&quot;: &quot;^4.0.0&quot;,
      &quot;url-loader&quot;: &quot;^4.1.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^9.8.4&quot;,
      &quot;file-loader&quot;: &quot;^6.0.0&quot;,
      &quot;husky&quot;: &quot;^2.2.0&quot;,
      &quot;image-webpack-loader&quot;: &quot;^6.0.0&quot;,
      &quot;postcss-color-function&quot;: &quot;^4.1.0&quot;,
      &quot;postcss-custom-properties&quot;: &quot;^8.0.10&quot;,
      &quot;postcss-easy-import&quot;: &quot;^3.0.0&quot;,
      &quot;prettier&quot;: &quot;^1.19.1&quot;,
      &quot;pretty-quick&quot;: &quot;^1.10.0&quot;
    },
    &quot;homepage&quot;: &quot;https://github.com/gatsbyjs/gatsby-starter-blog#readme&quot;,
    &quot;keywords&quot;: [
      &quot;gatsby&quot;,
      &quot;ghost&quot;,
      &quot;gallery&quot;,
      &quot;blog&quot;,
      &quot;starter&quot;
    ],
    &quot;license&quot;: &quot;MIT&quot;,
    &quot;main&quot;: &quot;n/a&quot;,
    &quot;repository&quot;: {
      &quot;type&quot;: &quot;git&quot;,
      &quot;url&quot;: &quot;git+https://github.com/ImedAdel/gatsby-london.git&quot;
    },
    &quot;scripts&quot;: {
      &quot;build&quot;: &quot;gatsby build&quot;,
      &quot;develop&quot;: &quot;gatsby develop&quot;,
      &quot;format&quot;: &quot;prettier --write src/**/*.{js,jsx}&quot;,
      &quot;start&quot;: &quot;npm run develop&quot;,
      &quot;serve&quot;: &quot;gatsby serve&quot;,
      &quot;test&quot;: &quot;echo \&quot;Write tests! -&gt; https://gatsby.dev/unit-testing\&quot;&quot;
    },
    &quot;husky&quot;: {
      &quot;hooks&quot;: {
        &quot;pre-commit&quot;: &quot;pretty-quick --staged&quot;
      }
    }
  }```
  </code></pre>
  </blockquote>
  <p>Once again any help would be highly appreciated :)</p>