1

在我的 gatsby 项目中，我收到了这个警告。

我正在使用盖茨比 v3。

警告看起来像这样

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`.MainImage

index.js看起来像这样。

import { graphql, Link } from "gatsby"

import React from "react"
import Layout from "../components/Layout"
import * as style from "../styles/home.module.css"
import { GatsbyImage } from "gatsby-plugin-image"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <section className={style.header}>
        <div>
          <h2>Design</h2>
          <h3>Develop & deploy</h3>
          <p>Become web ninja</p>
          <Link to="/projects" className={style.btn}>
            My Portfolio Projects
          </Link>
        </div>
        <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} />
      </section>
    </Layout>
  )
}

export const query = graphql`
  query Banner {
    file(relativePath: { eq: "banner.png" }) {
      childImageSharp {
        gatsbyImageData(layout: FIXED)
      }
    }
  }
`

请让我知道为什么我会收到此警告？

另外如何在 gatsby v3 中使用流体图像？

4

2 回答 2

0

尝试添加图像 alt 属性，这会在反应中引起警告

<GatsbyImage src="../images/dino.png" alt="A dinosaur" />
于 2021-03-10T15:56:19.117 回答
0

alt prop在来自 Gatsby 的新<GatsbyImage>组件中，v3可访问性改进是必需的，因此如果您没有它，只需将其留空，但您需要提供它：

<GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt={``} />

另外如何在 gatsby v3 中使用流体图像？

正如您在迁移指南和文档中看到的那样，该fluid属性已被重命名FULL_WIDTH为layout属性，因此要使用它，查询应该类似于：

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH)
}
于 2021-03-11T06:00:48.013 回答