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文档说要通过道具传递

意味着您可以在cache_get_value_name_int$$2, $3, $1$;标签内添加所需的任何属性。由于某些内部限制，您必须使用JavaScript名称属性而不是HTML属性（即Img而不是className）

所以：

class

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

1 个答案: