https://i.stack.imgur.com/zAsrJ.png
When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content.
<div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3">
<div className="mb-4">
<Image
src={ProfilePic}
alt=""
className="w-1/2 h-auto hover:drop-shadow-image"
/>
</div>
<div className="w-full flex flex-col items-start">
<p className="text-lg font-semibold text-light mb-1">------</p>
<p className="text-base font-medium text-light mb-1">-------</p>
<p className="text-sm font-medium text-light"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e1fce5e9f4e8e1c4e3e9e5ede8aae7ebe9">[email protected]</a></p>
</div>
</div>
The div contains this code snippet, but I only require the image without the extra square content.