使用 GatsbyImage 更改悬停图像的最佳方法

Question

我确实希望我的产品图像在鼠标悬停期间发生变化，但由于 GatsbyImage 不支持 onMouseEnter 道具，那么最好的处理方法是什么？

产品图片：

<GatsbyImage
              alt={firstImage?.altText ?? title}
              image={firstImage?.gatsbyImageData ?? storefrontImageData}
              loading={eager ? "eager" : "lazy"}
              className="object-cover object-center w-full h-full group-hover:opacity-75"
            />
          </div>

其中 firstImage 是数组中的第一个对象，secondImage 将是 images 数组中的第二个图像/对象，从 Shopify 中拉取，悬停时需要是活动图像。

我正在考虑一种解决方案，使两个 div 中的每一个都有一个独特的图像，并在悬停时使用 Framer Motion 激活第二个 div 并为其设置动画（使用条件渲染）。但就我而言，这不是一种干净的方法。我想遵循最佳实践，但我仍在学习很多东西，所以这就是我寻求帮助的原因:)

Answer 1

您可以只创建一个包装器div 来侦听onMouseEnter/onMouseLeave 事件：

const [activeImage, setActiveImage]= useState("gatsby");
// ...

  <div onMouseEnter={setActiveImage("store")} onMouseLeave={setActiveImage("gatsby")}>
      {activeImage === "gatsby" ? <GatsbyImage
                  alt={firstImage?.altText ?? title}
                  image={firstImage?.gatsbyImageData}
                  loading={eager ? "eager" : "lazy"}
                  className="object-cover object-center w-full h-full group-hover:opacity-75"
                /> : <GatsbyImage
                  alt={"Second Image"}
                  image={storefrontImageData}
                  loading={eager ? "eager" : "lazy"}
                  className="object-cover object-center w-full h-full group-hover:opacity-75"
                />}
    </div>

您的setActiveImage 可以是您需要的任何东西，在这种情况下，我设置了一个在gatsby 和store 之间变化的函数以用于演示目的，但可以是布尔值等。