I have used next.js incremental static regeneration rendering approach for my website and on my website i have some images for which i used next.js Image component which looks like this in my source code
<Image
blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder="blur"
src={fileObj.wsThumUrl}
width={120}
height={194}
alt={
breadCrumb.length > 1
? `${grade} ${subject} worksheet: ${breadCrumb[0]} - ${breadCrumb[1]}`
: `${grade} ${subject} worksheet: ${breadCrumb[0]}`
}
/>
but when i am seeing my page source code in chrome useing view-surce:https://www.example.com it showing the source code which contains img tag with src haveing url of the image but that image is wrapped by a tag called tag and i want to know how can i bring it out from tag so it could become crawlable by bots
here is my piece of source code
<img alt="Pre Kindergarden Maths worksheet: Basic Addition - Add upto 10" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjcwMCIgaGVpZ2h0uMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCmcm9tPSItNzAwIiB0bz0iNzAwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+Cjwvc3ZnPg==")"/><noscript><img alt="Pre Kindergarden Maths worksheet: Basic Addition - Add upto 10" src="https://www.example.com/aws/Bucket/getFile?key=worksheetDb/Pre%20Kindergarden/Maths/Basic%20Addition/Add%20upto%2010/ed88ee519710497eeb07877a840ffc7e/Add%20upto%2010%20-%206.png" decoding="async" data-nimg="intrinsic" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" loading="lazy"/></noscript>
i just expecting that what we have currently on our source code in the example above is crawlable or not if its not what should i do to make images more crawlable