警告：失败的道具类型：道具 `alt` 在 `MainImage` 中被标记为必需，但其值为 `undefined`主图像

问题描述

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

解决方法

尝试添加图片 alt 属性，这会在 react 中引起警告

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

, 来自 Gatsby 的 alt 的新 prop 组件中的

<GatsbyImage> v3 是可访问性改进所必需的，所以如果您没有它，请离开它是空的，但您需要提供它：

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

还有如何在 gatsby v3 中使用流体图像？

正如您在 migration guide 和 docs 中看到的，fluid 属性已重命名为 FULL_WIDTH 作为 layout 属性，因此使用它，查询应该类似于：

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH)
}