1

在我的函数中，我有一个包含 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>

有谁知道我该如何继续？

4

1 回答 1

1

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

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

资源：

于 2021-04-01T21:28:25.703 回答