NextJS 中无法放大图像

Question

我在 NextJS 中有一张图像，但无法通过单击将其放大，我该怎么做？我已经试过了，但是不行，谢谢！

...
  const [isZoomed, setIsZoomed] = useState(false);

  const handleZoomToggle = () => {
    setIsZoomed(!isZoomed);
  };
...


...
<CardHeader className="p-0">
                  <div onClick={handleZoomToggle} className="relative cursor-pointer overflow-hidden">
                  {post.image && (
                    // {post.image && (
                      <Image
                      alt={post.title}
                      src={post.image}
                      width={400}
                      height={200}
                      objectFit="cover"
                      unoptimized
                      // quality={75}
                      layout="responsive"
                      priority={false}
                      className="w-full h-48 object-cover"
                      // sizes="(max-width: 500px) 100vw, 500px"
                    />
                    )}
                    {post.video && (
                      <video 
                        src={post.video}
                        className="w-full h-48 object-cover"
                        controls
                      />
                    )}
                    </div>
                  </CardHeader>
...

Answer 1

在 Stackblitz 上尝试一下，效果很好。

还使用了测试数据

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

export default function Home() {
  const [isZoomed, setIsZoomed] = useState(false);

  const handleZoomToggle = () => {
    setIsZoomed(!isZoomed);
  };

  const post = {
    title: 'Sample Image',
    image: 'https://via.placeholder.com/400x200',
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div
        onClick={handleZoomToggle}
        className={`relative cursor-pointer overflow-hidden ${
          isZoomed
            ? 'fixed top-0 left-0 right-0 bottom-0 z-50 bg-black bg-opacity-75 flex justify-center items-center'
            : ''
        }`}
      >
        {post.image && (
          <Image
            alt={post.title}
            src={post.image}
            width={isZoomed ? 800 : 400}
            height={isZoomed ? 600 : 200}
            objectFit="cover"
            unoptimized
            layout="responsive"
            priority={false}
            className={`transition-transform duration-300 ease-in-out ${
              isZoomed ? 'w-auto h-auto' : 'w-full h-48'
            }`}
          />
        )}
      </div>
    </main>
  );
}