将 gatsby-plugin-image 的 GatsbyImage 与数组一起使用时出现问题

Question

在我的函数中，我有一个包含 id、标题和图像的数组：

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]
         )
       }
     }
   }
 }
`

资源：

将 gatsby-plugin-image 的 GatsbyImage 与数组一起使用时出现问题

Problem using GatsbyImage of gatsby-plugin-image with array

arrays

reactjs

gatsby

gatsby-image

gatsby-plugin