如何解决警告:失败的道具类型:道具 `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)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。