Javascript 如何在不在div nextjs 10上的情况下在图像组件中插入链接

我生成的代码：

<a href="http://localhost:4000/foto.jpg">
<div style="max-width:100%;width:200px"><div style="position:relative;padding-bottom:100%"><img alt="foto 2" data-src="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200" data-srcset="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200 200w" class="" style="visibility: visible; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;" src="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200" srcset="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200 200w"></div></div>
</a>

我希望它是怎样的：

<div style="max-width:100%;width:200px"><div style="position:relative;padding-bottom:100%">


<a href="http://localhost:4000/foto.jpg"><img alt="foto 2" data-src="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200" data-srcset="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200 200w" class="" style="visibility: visible; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;" src="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200" srcset="http://localhost:4000/quitanda-divino.jpg?auto=format&amp;w=200 200w"></a>
</div></div>

希望链接出现在图像上而不是div上。 我的组件库：

import Image from 'next/image';
import Link from "next/link";

const Gallery = (data:any)=>(
    <div className="projetos">{data.images.map((row:any, i:number) =><Link href={row.photos[0].link} key={row.photos[0].id}><a><Image src={row.photos[0].photo}  width="200" height="200" alt={row.photos[0].title} /></a></Link>)}</div>
);

  export default Gallery;

从“下一个/图像”导入图像；
从“下一个/链接”导入链接；
const Gallery=（数据：任意）=>(
{data.images.map（（行：any，i:number）=>）}
);
导出默认库；