如何使用 GraphiQl 在 Gatsby 中映射出多个图像?
How can I map out multiple images in Gatsby with GraphiQl?
我想通过 GraphiQl 从网页上的特定文件夹中查询多个图像。
我尝试了多种方法,但无法显示图像。但是,我可以显示 1 张图片(没有映射),但不能显示多张图片。
我还可以在网页上显示图片的id或base,以显示所有这些的列表。但是如果我尝试使用实际图像,我会在控制台中收到以下错误消息:
Warning: Failed prop type: The prop `alt` is marked as required in `J`, but its value is `undefined`.
at J (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:615:13)
at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:635:13)
at MainImage
at G (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:608:13)
该页面显示正确,但没有图像。我的代码有问题吗?
import * as React from "react"
import {graphql} from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../../components/layout"
const JewelryPage = ({ data }) => {
const image = getImage(data.allFile.childrenImageSharp)
return (
<Layout pageTitle="Jewelry">
<h1>Jewelry</h1>
{data.allFile.edges.map(image => (
<GatsbyImage image={image} />
))}
</Layout>
)
}
export default JewelryPage
export const query = graphql `
query {
allFile(filter: {relativeDirectory: {eq: "content/portfolio/jewelry"}}) {
edges {
node {
childrenImageSharp {
gatsbyImageData(
width: 800
placeholder: DOMINANT_COLOR
formats: [AUTO, WEBP, AVIF]
)
}
base
id
}
}
}
}
`
我的 gatsby-config 看起来像这样
module.exports = {
siteMetadata: {
title: ``,
siteUrl: ``
},
plugins: [{
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": ""
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-sitemap", {
resolve: 'gatsby-plugin-manifest',
options: {
"icon": `${__dirname}/src/images/icon.png`
}
}, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp",
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": `${__dirname}/src/images/`
}
},
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": `${__dirname}/src/pages/`
}
},
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "jewelry",
"path": `${__dirname}/src/images/content/portfolio/jewelry/`
}
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Cormorant\:200,300,300i,400,500,600`,
`Forum\:200,400,500,600`
],
display: 'swap'
}
},
"gatsby-plugin-netlify",
]
};
试试这个:
const JewelryPage = ({ data }) => {
return (
<Layout pageTitle="Jewelry">
<h1>Jewelry</h1>
{data.allFile.edges.node.map(image => {
console.log("image", image);
return <GatsbyImage image={image?.childrenImageSharp?.gatsbyImageData} alt="some alt text"/>
})}
</Layout>
)
}
image
在你的循环中,代表 node
,所以为了向 GatsbyImage
提供正确的数据,你必须访问 childrenImageSharp
和 gatsbyImageData
.
另外,如错误提示,alt
属性是GatsbyImage
的属性所必需的,您必须为每个图像提供它。
我想通过 GraphiQl 从网页上的特定文件夹中查询多个图像。
我尝试了多种方法,但无法显示图像。但是,我可以显示 1 张图片(没有映射),但不能显示多张图片。
我还可以在网页上显示图片的id或base,以显示所有这些的列表。但是如果我尝试使用实际图像,我会在控制台中收到以下错误消息:
Warning: Failed prop type: The prop `alt` is marked as required in `J`, but its value is `undefined`.
at J (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:615:13)
at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:635:13)
at MainImage
at G (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:608:13)
该页面显示正确,但没有图像。我的代码有问题吗?
import * as React from "react"
import {graphql} from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../../components/layout"
const JewelryPage = ({ data }) => {
const image = getImage(data.allFile.childrenImageSharp)
return (
<Layout pageTitle="Jewelry">
<h1>Jewelry</h1>
{data.allFile.edges.map(image => (
<GatsbyImage image={image} />
))}
</Layout>
)
}
export default JewelryPage
export const query = graphql `
query {
allFile(filter: {relativeDirectory: {eq: "content/portfolio/jewelry"}}) {
edges {
node {
childrenImageSharp {
gatsbyImageData(
width: 800
placeholder: DOMINANT_COLOR
formats: [AUTO, WEBP, AVIF]
)
}
base
id
}
}
}
}
`
我的 gatsby-config 看起来像这样
module.exports = {
siteMetadata: {
title: ``,
siteUrl: ``
},
plugins: [{
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": ""
}
}, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-sitemap", {
resolve: 'gatsby-plugin-manifest',
options: {
"icon": `${__dirname}/src/images/icon.png`
}
}, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp",
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": `${__dirname}/src/images/`
}
},
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": `${__dirname}/src/pages/`
}
},
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "jewelry",
"path": `${__dirname}/src/images/content/portfolio/jewelry/`
}
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Cormorant\:200,300,300i,400,500,600`,
`Forum\:200,400,500,600`
],
display: 'swap'
}
},
"gatsby-plugin-netlify",
]
};
试试这个:
const JewelryPage = ({ data }) => {
return (
<Layout pageTitle="Jewelry">
<h1>Jewelry</h1>
{data.allFile.edges.node.map(image => {
console.log("image", image);
return <GatsbyImage image={image?.childrenImageSharp?.gatsbyImageData} alt="some alt text"/>
})}
</Layout>
)
}
image
在你的循环中,代表 node
,所以为了向 GatsbyImage
提供正确的数据,你必须访问 childrenImageSharp
和 gatsbyImageData
.
另外,如错误提示,alt
属性是GatsbyImage
的属性所必需的,您必须为每个图像提供它。