使用带有数组的 gatsby-plugin-image 的 GatsbyImage 时出现问题

Question

在我的函数中，我有一个包含 id、title 和 image 的数组：

const arrays = [
    { id: 1, title: 'First Title', image: 'images/photo1.jpg' },
    { id: 2, title: 'Second Title', image: 'images/photo2.jpg' },
    { id: 3, title: 'Third Title', image: 'https://placekitten.com/800/600' },
    { id: 4, title: 'Fourth Title', image: 'https://placekitten.com/800/600' },
 ]

使用<img> 标签我只能查看来自网络的最后两个占位符图像。但我想使用 gatsby-plugin-image。我已经阅读了文档，需要使用GatsbyImage 标签，但是当我使用它时，看不到图像。

        <ul className="text-center wrap">
            {arrays.map((array, image) => (
              <li key={project.id}>
                <a
                  className="mx-auto text-3xl lg:text-4xl wrap-txt transition-all duration-300 z-40"
                  onMouseEnter={() => setIsShown(array.id)}
                  onMouseLeave={() => setIsShown(0)}
                  href="/"
                >
                  {array.title}
                </a>
                {isShown === array.id && (
                  <div className="w-1/4 absolute bottom-10 ">
                    <GatsbyImage image={array.image} className="w-full z-40" alt="" />
                  </div>
                )}
              </li>
            ))}
          </ul>

有谁知道我该如何继续？

Answer 1

您不能使用未解析和未转换图像的GatsbyImage 组件。 Gatsby 需要使用其解析器和转换器来处理您想要显示的图像。此过程将创建一个 GraphQL 节点，其中包含在 Gatsby 文件系统中设置的所有图像所需的数据，因此，您需要将数据本地存储在项目中，或者，您可能希望使用StaticImage，它接受远程图像，但不'不接受动态数据（比如你的对象数组）。

在获取 CMS 数据时，由插件处理此过程并允许您使用外部图像以及 GatsbyImage 组件。

在你的情况下，我会调试为什么你只使用img 标签看到最后两个图像，这似乎与路径的相对性有关。也许这对你有用：

const arrays = [
    { id: 1, title: 'First Title', image: '../images/photo1.jpg' },
    { id: 2, title: 'Second Title', image: '../images/photo2.jpg' },
    { id: 3, title: 'Third Title', image: 'https://placekitten.com/800/600' },
    { id: 4, title: 'Fourth Title', image: 'https://placekitten.com/800/600' },
 ]

或者，如果您想使用 GatsbyImage，您需要下载并在本地存储图像并相应地设置gatsby-plugin-filesystem。假设你在/src/images本地下载并存储图片：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`,
  },
},

Gatsby 将知道您的图像存储在哪里，并将创建适当的 GraphQL 解析器，让您可以使用 childImageSharp。您可以通过localhost:8000/___graphql 查看他们的可用性。例如：

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"

function BlogPost({ data }) {
 const image = getImage(data.blogPost.avatar)
 return (
   <section>
     <h2>{data.blogPost.title}</h2>
     <GatsbyImage image={image} alt={data.blogPost.author} />
     <p>{data.blogPost.body}</p>
   </section>
 )
}

export const pageQuery = graphql`
 query {
   blogPost(id: { eq: $Id }) {
     title
     body
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
           width: 200
           placeholder: BLURRED
           formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

资源：

• https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#gatsbyimage
• https://www.gatsbyjs.com/plugins/gatsby-plugin-image/