警告：失败的道具类型：道具“alt”在“MainImage”中被标记为必需，但其值为“未定义”。主图

Question

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

我正在使用 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 中使用流体图像？

Answer 1

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

<GatsbyImage src="../images/dino.png" alt="A dinosaur" />

Answer 2

alt prop 在新的 <GatsbyImage> 组件中，来自 Gatsby 的 v3，是可访问性改进所必需的，所以如果你没有，留空即可，但您需要提供：

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

Also how can I use fluid image in gatsby v3 ?

正如您在migration guide and in the docs中看到的那样，fluid属性已重命名为FULL_WIDTH作为layout属性，所以要使用它，查询应该类似于：

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH)
}

警告：失败的道具类型：道具“alt”在“MainImage”中被标记为必需，但其值为“未定义”。主图

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

reactjs

gatsby

gatsby-image

gatsby-plugin