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)` }}>

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

2 个答案: