Question

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

dependencies:
  flutter:
    sdk: flutter
  flutter_cache_manager: any

}，

在网站上使用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"

在gatsby云上进行构建/部署后，所有页面都可以在构建/开发中正常运行，但是当页面处于联机状态时则无法正常工作。

Answer 1

使用gatsby-plugin-react-svg时，您的SVG文件夹不得包含SVG以外的任何其他种类的资产。确保包含规则是仅SVG文件夹，理想情况下，通过创建特定文件夹，例如：

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

Gatsby Cloud和Netlify部署上的SVG问题

1 个答案: