Next.js image source url and img tag is comming in <noscript> tag Why?

63 views Asked by At

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(&quot;data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjcwMCIgaGVpZ2h0uMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImciPgogICAgICA8c3RvcCmcm9tPSItNzAwIiB0bz0iNzAwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgIC8+Cjwvc3ZnPg==&quot;)"/><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

0

There are 0 answers