我对用作导入I gatsby站点的svg有问题。在开发、构建和服务模式方面,一切似乎都很顺利。当我在与netflix集成的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-plugin-react-svg
时,SVG文件夹中不得包含SVG以外的任何其他类型的资产。确保您的include规则是一个仅SVG的文件夹,最好是创建一个特定的文件夹,如:
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /svg/
}
}
}