Gatsby Cloud 和 Netlify 部署上的 SVG 问题答案

【问题标题】：Problems with SVGs on Gatsby Cloud and Netlify deploymentGatsby Cloud 和 Netlify 部署上的 SVG 问题
【发布时间】：2020-10-24 01:38:32
【问题描述】：

我在 gatsby 网站上将 svg 用作导入的问题。在开发、构建和服务模式上，一切似乎都运行良好。当我在与 netflify 集成的 gatsby 云上部署站点时，所有导入的 svg 不是作为内联 html 代码无法正常工作的。奇怪的是我在构建/部署过程中没有收到任何错误。任何人都可以帮忙吗？下面是我的依赖项和在网站上使用 svg 的示例。

"dependencies": {
"@mdx-js/mdx": "^1.6.6",
"@mdx-js/react": "^1.6.6",
"babel-plugin-styled-components": "^1.10.7",
"dotenv": "^8.2.0",
"gatsby": "^2.24.2",
"gatsby-image": "^2.4.13",
"gatsby-plugin-layout": "^1.3.10",
"gatsby-plugin-manifest": "^2.4.18",
"gatsby-plugin-mdx": "^1.2.25",
"gatsby-plugin-offline": "^3.2.17",
"gatsby-plugin-react-helmet": "^3.3.10",
"gatsby-plugin-react-svg": "^3.0.0",
"gatsby-plugin-sharp": "^2.6.19",
"gatsby-plugin-styled-components": "^3.3.10",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-datocms": "^2.3.0",
"gatsby-source-filesystem": "^2.3.19",
"gatsby-transformer-sharp": "^2.5.11",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^6.1.0",
"slugify": "^1.4.4",
"styled-components": "^5.1.1"

在网站上使用 svg 的示例：

import heroBgSvg from "../../assets/images/bg/bgHeroDark.svg"

const HeroSectionWrapper = styled.div`
  background-image: url(${heroBgSvg});
  background-repeat: no-repeat;`

在构建/开发时一切正常，但在 gatsby 云上构建/部署后页面在线时却没有。

【问题讨论】：

标签： svg gatsby netlify

【解决方案1】：

使用gatsby-plugin-react-svg 时，您的 SVG 文件夹不得包含任何其他类型的资源，而不是 SVG。确保您的包含规则是一个仅限 SVG 的文件夹，最好创建一个特定的文件夹，例如：

{
  resolve: 'gatsby-plugin-react-svg',
  options: {
    rule: {
      include: /svg/
    }
  }
}

【讨论】：