Next.js项目中onclick函数失效：点击切换图片无响应

问题原因 #

1. Next.js Image组件的URL优化特性：Next.js的Image组件会对传入的原始图片URL进行优化处理，页面实际渲染的<img>元素src是经过转换后的地址，并非你写的原始URL，导致image.src.match(原始URL)的判断完全不成立，逻辑无法执行。
2. 直接操作DOM不符合React设计逻辑：React依赖状态（state）驱动组件渲染，直接用document.getElementById操作DOM会绕过状态更新机制，既容易出错也违背React的核心思想。

解决方案 #

改用React的useState钩子管理图片地址状态，通过修改状态实现图片切换，彻底避免直接操作DOM：

修改后的代码 #

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

const Portfolio = () => {
  // 用state管理当前显示的图片地址
  const [currentImage, setCurrentImage] = useState(
    "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80"
  );

  const changeImage = () => {
    const originalImg = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80";
    const targetImg = "https://images.unsplash.com/photo-1594717527389-a590b56e8d0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80";
    
    // 根据当前状态切换图片地址
    setCurrentImage(prev => prev === originalImg ? targetImg : originalImg);
  };

  return (
    <div className='max-w-[1240px] mx-auto py-16 text-center'>
      <button onClick={changeImage}>Travel Photos</button>
      <div className='grid grid-rows-none md:grid-cols-5 p-4 gap-4'>
        <div className='w-full h-full col-span-2 md:col-span-3 row-span-2'>
          <Image
            src={currentImage} // 绑定状态中的图片地址
            alt='Travel photo'
            layout='responsive'
            width='677'
            height='451'
            onClick={changeImage} // 点击图片也能触发切换
          />
        </div>
      </div>
    </div>
  );
};

export default Portfolio;

关键改动说明 #

• 引入useState钩子存储图片地址，通过setCurrentImage更新状态，React会自动重新渲染组件并更新图片。
• 切换逻辑直接对比状态中的地址，不再依赖DOM元素的src，规避了Next.js图片优化带来的地址不一致问题。
• 移除了id='myImage'和document.getElementById操作，完全遵循React状态驱动的渲染模式。

内容的提问来源于stack exchange，提问作者Vikrant gupta