如何将 className 传递给 Gatsby 中的图像组件

Question

我正在使用 gatsby-image 和 gatsby-source-filesytem 我希望 img 标签（徽标组件）在呈现为 html 时具有 className 的 logo 怎么做我开始这样做，gatsby-image 文档说通过道具传递它。我还是不太明白反应，所以需要帮助理解这是我的代码。

logo.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.app/gatsby-image
 * - `StaticQuery`: https://gatsby.app/staticquery
 */

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "riel-type.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image

index.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import Logo from "../components/logo"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
    <div className="row">
      <div className="col-4">
        <Logo />
      </div>
    </div>
  </Layout>
)

export default IndexPage

Answer 1

gatsby-image docs say to pass it through props

意味着您可以在 Img 标签内添加任何您想要的属性。由于某些内部限制，您必须使用 JavaScript 名称属性而不是 HTML 名称属性（即 className 而不是 class）

所以：

render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} className="logo" />}

如何将 className 传递给 Gatsby 中的图像组件

How do I pass a className to a image component in Gatsby

reactjs

gatsby

react-props