找不到带有 SVG 的盖茨比背景图像

Question

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import styled from 'styled-components'
import BackgroundImage from 'gatsby-background-image'
import Slider from "react-slick";
import "./layout.css"
const BizTech = ({ className }) => (
<StaticQuery
query={graphql`
query {
desktop: file(relativePath: { eq: "foobar.svg" }) {
childImageSharp {
fluid(quality: 90, maxWidth: 1920) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`}
render={data => {
// Set ImageData.
const imageData = data.desktop.childImageSharp.fluid
const settings = {
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
speed: 500,
cssEase: "linear"
};
return (
<BackgroundImage Tag="section" className={className} fluid={imageData} backgroundColor={`transparent`} style={{ }}>
<div style={{ }}>
<h3>FOOBAR</h3>
</div>
</BackgroundImage>
)
}}
/>
)
const StyledBT = styled(BizTech)`
width: 100%;
background-position: bottom center;
background-repeat: repeat-y;
background-size: cover;
`
export default StyledBT

当引用的图像文件为 JPG 时，将找到并显示该文件。 如果它是如上所述的 SVG，则不是。

Answer 1

正如@ksav评论中指出的那样，尖锐节点工作流集成目前不支持使用 SVG 源文件。

Answer 2

我知道有一个公认的答案，但对于仍在寻找可能解决方案的人来说，希望这有所帮助：

我最终将 SVG 放在静态文件夹中，然后将其作为内联样式引用到我想要拥有 SVG 背景图像的div。这样：

<div style={{ backgroundImage: `url(/static/bg.svg)` }}>