如何在悬停时更新图像源？

Question

我正在尝试使用 Next.js Image 组件在我的应用程序页面上呈现图像。我在理解如何 select 和更新主图像 src 时遇到问题，以便我可以用 Next.js 为 Image 元素创建的所有响应尺寸替换它。

我的应用程序菜单中有一个导航列表 link，我想为每个导航分配数据属性，这样当这些 link 悬停在上面时，它们会更新主 Image 元素并为每个 link 悬停显示不同的主图像。

我是 React 及其工作方式的新手，所以我不确定我的问题是什么，但我已经从一些基本概念开始。我已经开始控制台记录我必须查看得到的数据，但现在我遇到了麻烦。

这是我目前的情况：

import React, { useState, useEffect, useRef } from 'react';
import Image from 'next/image';

function Header() {

  const MenuHeroImg = useRef();

  function handleMouseEnter(e) {
    console.log(e.target.getAttribute('data-project-image-url'));
    console.log(MenuHeroImg.current);
  }

  return (
    <>
     <ul>
        <li
         onMouseEnter={handleMouseEnter}
         data-project-image-url="/public/images/projects/image_2.png"
         className={`${navigationStyles['c-navigation-menu-link']}`}>
         <Link href="/project-link-here">Link</Link>
        </li>
        <li
         onMouseEnter={handleMouseEnter}
         data-project-image-url="/public/images/projects/image_3.png"
         className={`${navigationStyles['c-navigation-menu-link']}`}>
         <Link href="/project-link-here_2">Link</Link>
        </li>
     <ul>
     <picture ref={MenuHeroImg}>
       <Image
        src="/public/images/projects/image_1.png"
        alt="Image"
        width={660}
        height={835}
        layout="responsive"
       />
     </picture>
    </>
  );
}

export default Header;

控制台日志：

Answer 1

src 应该是这样的：/images/projects/image_1.png; 因为 nextjs 在 public 文件夹

的根文件夹中查找图像

Answer 2

与其使用 data-* 属性设置图像路径，不如将图像源移动到一个状态变量中，然后您可以在每个 onMouseEnter 被触发时更新该变量。

另请注意，public 文件夹中的图像被引用为 /images/projects/image_1.png，没有 /public。

import React, { useState } from 'react';
import Image from 'next/image';

function Header() {
    const [image, setImage] = useState('/images/projects/image_1.png');

    function handleMouseEnter(imagePath) {
        return () => {
            setImage(imagePath);
        };
    }

    return (
        <>
            <ul>
                <li
                    onMouseEnter={handleMouseEnter('/images/projects/image_2.png')}
                    className={`${navigationStyles['c-navigation-menu-link']}`}
                >
                    <Link href="/project-link-here">Link</Link>
                </li>
                <li
                    onMouseEnter={handleMouseEnter('/images/projects/image_3.png')}
                    className={`${navigationStyles['c-navigation-menu-link']}`}
                >
                    <Link href="/project-link-here_2">Link</Link>
                </li>
            <ul>
            <Image
                src={image}
                alt="Image"
                width={660}
                height={835}
                layout="responsive"
            />
        </>
    );
}

export default Header;

如何在悬停时更新图像源？

How to update image source on hover?

reactjs

next.js

nextjs-image