当我单击实际的 img 时，我如何看到放大的图像

Question

如何在图像模态视图上访问src={img.urls.small}？ 看起来它说img 没有定义，这是真的，但我不知道如何让它在我的模态视图上工作。

const Photos = ({ images }) => {
const [hovered, setHovered] = useState(false);
const Dialog = styled.div`
background: white;
border-radius: 5px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
`;
return (
<section>
<h1>PHOTOGRAPHY</h1>
{images &&
images.map(img => (
<li key={img.id} data-key={img.id} onClick={() => setHovered(true)}>
<img
className="grid__item"
alt={img.alt_description}
src={img.urls.small}
/>
</li>
))}
{hovered && (
<Dialog onClick={() => setHovered(false)}>
<p>
<span role="img" aria-label="tada">
🎉
</span>
</p>
CLOSE MODAL
</Dialog>
)}
</section>
);
};
export default Photos;

Answer 1

我不确定问题出在哪里，但不幸的是我无法评论问。我认为您正在尝试为您的图像数组找到正确的对象结构？

var images = [
{
urls: {
small: "path/to/your/small_image.png",
big: "path/to/your/big_image.png"
}
},
{
urls: {
small: "path/to/your/small_image2.png",
big: "path/to/your/big_image2.png"
}
}
];