javascript - Gatsby 网站不呈现 GIF

Question

概括

你好，我来寻求帮助——我已经花了整整两天时间试图弄清楚。我似乎无法破解如何在我的网站上加载 gif。（我对编码很陌生，所以如果这很明显，请原谅我）

js 位置：src/page/volvic

像这样把它们带进来： 从“../../content/assets/projects/volic.gif”导入volvic

并这样称呼它： <img src={volvic} />

给我这个错误：（ 终端）

ERROR #98123 WEBPAC
Generating development JavaScript bundle failed
Unexpected character '' (1:6)
File: content/assets/projects/volvic.gif:1:6

––––– (本地主机)

./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)

有人可以指出我正确的方向吗，任何帮助将不胜感激。

环境（如果相关）

https://github.com/supnim/new-port - 回购

    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 => 2.23.4
    gatsby-image: ^2.4.12 => 2.4.12
    gatsby-plugin-feed: ^2.5.5 => 2.5.5
    gatsby-plugin-google-analytics: ^2.3.4 => 2.3.4
    gatsby-plugin-manifest: ^2.4.11 => 2.4.11
    gatsby-plugin-netlify: ^2.3.5 => 2.3.5
    gatsby-plugin-offline: ^2.1.0 => 2.2.10
    gatsby-plugin-postcss: ^2.3.4 => 2.3.4
    gatsby-plugin-purgecss: ^3.1.1 => 3.1.1
    gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
    gatsby-plugin-sass: ^2.3.4 => 2.3.4
    gatsby-plugin-sharp: ^2.6.17 => 2.6.17
    gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-remark-copy-linked-files: ^2.3.10 => 2.3.10
    gatsby-remark-embed-video: ^2.0.1 => 2.0.1
    gatsby-remark-images: ^2.0.6 => 2.0.6
    gatsby-remark-prismjs: ^3.5.4 => 3.5.4
    gatsby-remark-responsive-iframe: ^2.4.5 => 2.4.5
    gatsby-remark-smartypants: ^2.3.4 => 2.3.4
    gatsby-source-filesystem: ^2.3.11 => 2.3.11
    gatsby-transformer-remark: ^2.8.16 => 2.8.16
    gatsby-transformer-sharp: ^2.5.10 => 2.5.10
  npmGlobalPackages:
    gatsby-cli: 2.12.58

文件内容（如果更改）

盖茨比-config.js：

const siteConfig = require("./siteConfig");

//ive just added this
module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          "file-loader",
          {
            loader: "image-webpack-loader",
            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: "gatsby-remark-embed-video",
            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("postcss-easy-import")(),
          require("postcss-custom-properties")({ preserve: false }),
          require("postcss-color-function")(),
          require("autoprefixer")({ browsers: ["last 2 versions"] })
        ]
      }
    },
    {
      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: "gatsby-plugin-react-svg",
      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`
  ]
};

package.json:

  "name": "supnim.com",
  "private": true,
  "description": "Product designer based in London",
  "version": "1.0.0",
  "author": "Nimesh Reghunandanan <[e-mail]>",
  "bugs": {
    "url": "https://github.com/ImedAdel/gatsby-london/issues"
  },
  "dependencies": {
    "acorn": "^7.3.1",
    "acorn-dynamic-import": "^4.0.0",
    "core-js": "^3.6.5",
    "framer": "^1.2.3",
    "framer-motion": "^1.11.1",
    "gatsby": "^2.23.4",
    "gatsby-image": "^2.4.12",
    "gatsby-plugin-feed": "^2.5.5",
    "gatsby-plugin-google-analytics": "^2.3.4",
    "gatsby-plugin-manifest": "^2.4.11",
    "gatsby-plugin-netlify": "^2.3.5",
    "gatsby-plugin-offline": "^2.1.0",
    "gatsby-plugin-postcss": "^2.3.4",
    "gatsby-plugin-purgecss": "^3.1.1",
    "gatsby-plugin-react-helmet": "^3.3.4",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-sass": "^2.3.4",
    "gatsby-plugin-sharp": "^2.6.17",
    "gatsby-plugin-smoothscroll": "^1.1.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-remark-copy-linked-files": "^2.3.10",
    "gatsby-remark-embed-video": "^2.0.1",
    "gatsby-remark-images": "^2.0.6",
    "gatsby-remark-prismjs": "^3.5.4",
    "gatsby-remark-responsive-iframe": "^2.4.5",
    "gatsby-remark-smartypants": "^2.3.4",
    "gatsby-source-filesystem": "^2.3.11",
    "gatsby-transformer-remark": "^2.8.16",
    "gatsby-transformer-sharp": "^2.5.10",
    "jshint": "^2.11.1",
    "motion": "^5.0.0-beta26",
    "node-sass": "^4.14.1",
    "open": "^7.0.4",
    "path": "^0.12.7",
    "prismjs": "^1.20.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-images": "^1.1.7",
    "react-photo-gallery": "^8.0.0",
    "react-refresh": "^0.8.3",
    "sharp": "^0.25.4",
    "stream": "0.0.2",
    "tsutils": "^3.17.1",
    "typescript": "^3.9.5",
    "url-join": "^4.0.0",
    "url-loader": "^4.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.8.4",
    "file-loader": "^6.0.0",
    "husky": "^2.2.0",
    "image-webpack-loader": "^6.0.0",
    "postcss-color-function": "^4.1.0",
    "postcss-custom-properties": "^8.0.10",
    "postcss-easy-import": "^3.0.0",
    "prettier": "^1.19.1",
    "pretty-quick": "^1.10.0"
  },
  "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
  "keywords": [
    "gatsby",
    "ghost",
    "gallery",
    "blog",
    "starter"
  ],
  "license": "MIT",
  "main": "n/a",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ImedAdel/gatsby-london.git"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write src/**/*.{js,jsx}",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}```

再次高度赞赏任何帮助:)

标签： javascriptreactjswebpackgatsbygif

Answer 1

你不需要做任何额外的加载器来加载.gif文件。它与渲染任何图像完全相同。您只需要导入组件并将其用作图像源。

我建议在您的gatsby-config.js（全部第一个module.exports）中删除该配置，因为如果您想添加任何 webpack 加载器，那不是这个地方，您需要在gatsby-node.js文件中创建它并使用Gatsby 的 API 进行自定义配置（onCreateWebpackConfig等）。这是先进的东西，我不认为这是你现在需要的。

根据盖茨比关于.gifs文件的文档：

在 Markdown 帖子和页面中，包含动画 GIF 与静态图像相同：

import React from 'react';
import Layout from '../components/templates/Layout/Layout';
import test from '../assets/test.gif';

const Index = props => {
  return <Layout>
    <h1>Hi people</h1>
    <img src={test}/>
  </Layout>;
};

正如我所说，你gatsby-config.js应该看起来像：

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: "gatsby-remark-embed-video",
            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("postcss-easy-import")(),
          require("postcss-custom-properties")({ preserve: false }),
          require("postcss-color-function")(),
          require("autoprefixer")({ browsers: ["last 2 versions"] })
        ]
      }
    },
    {
      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: "gatsby-plugin-react-svg",
      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`
  ]
};

我刚刚在我的本地机器上检查了它并且工作正常。

如果您需要添加额外的控件，您可能需要查看一些外部库，例如react-gif-player。