盖茨比:getImage returns 未定义
Gatsby: getImage returns undefined
getImage 返回未定义,因此我的 GatsbyImage 组件未呈现。
文件结构:
- src/pages/gallery.js
- src/images(有 12 张照片名为 photo-01.jpg、photo-02.jpg、...)
我有以下代码 (gallery.js):
import React from "react";
import Layout from "../components/Layout";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
const Gallery = () => {
const { gallery } = useStaticQuery(graphql`
query {
gallery: allFile(
filter: {
extension: { eq: "jpg" }
absolutePath: { regex: "/images/" }
}
) {
nodes {
id
childImageSharp {
fluid(maxWidth: 500, maxHeight: 500) {
...GatsbyImageSharpFluid_tracedSVG
}
}
}
}
}
`);
return (
<Layout>
<div className="container py-5">
<div className="row">
<div className="col-12">
<h1 className="text-gastby mb-4">Gallery</h1>
</div>
</div>
<div className="row">
{gallery.nodes.map((image) => (
<div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
<GatsbyImage
image={getImage(image.childImageSharp.fluid)}
alt="Gallery"
/>
</div>
))}
</div>
</div>
</Layout>
);
};
export default Gallery;
我有什么问题吗?
问题是你在混合 gatsby-image
(from Gatsby 1 to Gatsby 2) and gatsby-plugin-image
(从 Gatsby 3 开始)。第一个现已弃用。
当您查询 fluid
或 fixed
GraphQL 节点时,这很容易被发现,因为它们是由 gatsby-image
使用 Img
创建的(from 'gatsby-image
') 组件,它接受 fluid
或 fixed
属性.
另一方面,gatsby-plugin-image
查询 gatsbyImageData
(不是 fluid
或 fixed
)和相应的 GatsbyImage
(from 'gatsby-plugin-image'
) 组件接受 image
属性.
在您的例子中,您正在查询 gatsby-plugin-image
组件中应用的 gatsby-image
结构,这就是它返回 undefined
.
的原因
检查 migration guide 但基本上您需要替换(并删除)对 gatsby-image
的所有引用并安装所需的依赖项:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
将其添加到您的 gatsby-config.js
:
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
并将您的查询更改为:
const Gallery = () => {
const { gallery } = useStaticQuery(graphql`
query {
gallery: allFile(
filter: {
extension: { eq: "jpg" }
absolutePath: { regex: "/images/" }
}
) {
nodes {
id
childImageSharp {
gatsbyImageData(layout: FIXED)
}
}
}
}
`);
return (
<Layout>
<div className="container py-5">
<div className="row">
<div className="col-12">
<h1 className="text-gastby mb-4">Gallery</h1>
</div>
</div>
<div className="row">
{gallery.nodes.map((image) => (
<div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
<GatsbyImage
image={getImage(image.childImageSharp)}
alt="Gallery"
/>
</div>
))}
</div>
</div>
</Layout>
);
};
export default Gallery;
Double-check 查询,因为应用 gatsby-plugin-image
.
时节点和结构可能不同
注意getImage
是一个辅助函数,你可能不需要它,考虑直接使用:
<GatsbyImage
image={image.childImageSharp.gatsbyImageData}
alt="Gallery"
/>
getImage 返回未定义,因此我的 GatsbyImage 组件未呈现。
文件结构:
- src/pages/gallery.js
- src/images(有 12 张照片名为 photo-01.jpg、photo-02.jpg、...)
我有以下代码 (gallery.js):
import React from "react";
import Layout from "../components/Layout";
import { useStaticQuery, graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
const Gallery = () => {
const { gallery } = useStaticQuery(graphql`
query {
gallery: allFile(
filter: {
extension: { eq: "jpg" }
absolutePath: { regex: "/images/" }
}
) {
nodes {
id
childImageSharp {
fluid(maxWidth: 500, maxHeight: 500) {
...GatsbyImageSharpFluid_tracedSVG
}
}
}
}
}
`);
return (
<Layout>
<div className="container py-5">
<div className="row">
<div className="col-12">
<h1 className="text-gastby mb-4">Gallery</h1>
</div>
</div>
<div className="row">
{gallery.nodes.map((image) => (
<div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
<GatsbyImage
image={getImage(image.childImageSharp.fluid)}
alt="Gallery"
/>
</div>
))}
</div>
</div>
</Layout>
);
};
export default Gallery;
我有什么问题吗?
问题是你在混合 gatsby-image
(from Gatsby 1 to Gatsby 2) and gatsby-plugin-image
(从 Gatsby 3 开始)。第一个现已弃用。
当您查询 fluid
或 fixed
GraphQL 节点时,这很容易被发现,因为它们是由 gatsby-image
使用 Img
创建的(from 'gatsby-image
') 组件,它接受 fluid
或 fixed
属性.
另一方面,gatsby-plugin-image
查询 gatsbyImageData
(不是 fluid
或 fixed
)和相应的 GatsbyImage
(from 'gatsby-plugin-image'
) 组件接受 image
属性.
在您的例子中,您正在查询 gatsby-plugin-image
组件中应用的 gatsby-image
结构,这就是它返回 undefined
.
检查 migration guide 但基本上您需要替换(并删除)对 gatsby-image
的所有引用并安装所需的依赖项:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp
将其添加到您的 gatsby-config.js
:
module.exports = {
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
],
}
并将您的查询更改为:
const Gallery = () => {
const { gallery } = useStaticQuery(graphql`
query {
gallery: allFile(
filter: {
extension: { eq: "jpg" }
absolutePath: { regex: "/images/" }
}
) {
nodes {
id
childImageSharp {
gatsbyImageData(layout: FIXED)
}
}
}
}
`);
return (
<Layout>
<div className="container py-5">
<div className="row">
<div className="col-12">
<h1 className="text-gastby mb-4">Gallery</h1>
</div>
</div>
<div className="row">
{gallery.nodes.map((image) => (
<div className="col-lg-3 col-md-4 col-sm-6 mb-3" key={image.id}>
<GatsbyImage
image={getImage(image.childImageSharp)}
alt="Gallery"
/>
</div>
))}
</div>
</div>
</Layout>
);
};
export default Gallery;
Double-check 查询,因为应用 gatsby-plugin-image
.
注意getImage
是一个辅助函数,你可能不需要它,考虑直接使用:
<GatsbyImage
image={image.childImageSharp.gatsbyImageData}
alt="Gallery"
/>