我在 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>
...
在 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>
);
}