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

【问题标题】：Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`. MainImage警告：失败的道具类型：道具`alt`在`MainImage`中标记为必需，但其值为`undefined`。主图像
【发布时间】：2021-03-10 15:44:32
【问题描述】：

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

【问题讨论】：

标签： reactjs gatsby gatsby-image gatsby-plugin

【解决方案1】：

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

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

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

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

childImageSharp {
  gatsbyImageData(layout: FULL_WIDTH)
}

【讨论】：

【解决方案2】：

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

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

【讨论】：