Add data-nimg attribute to image component (#27899)

This PR adds a single data attribute to the image element generated by the image component `data-nimg`) which just serves to signal that this image element is from the component. Currently it's hard to quickly/programmatically determine with certainty whether an image is from the component or not, so this change should make it easier for us to diagnose and improve performance issues related to the image component.
vercel · Aug 11, 2021 · 12eb812 · 12eb812
1 parent b4be678
commit 12eb812
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -600,6 +600,7 @@ export default function Image({
               loader,
             })}
             decoding="async"
+            data-nimg
             style={imgStyle}
             className={className}
           />
@@ -609,6 +610,7 @@ export default function Image({
         {...rest}
         {...imgAttributes}
         decoding="async"
+        data-nimg
         className={className}
         ref={(img) => {
           setRef(img)
@@ -633,9 +635,9 @@ export default function Image({
             rel="preload"
             as="image"
             href={imgAttributes.srcSet ? undefined : imgAttributes.src}
-            // @ts-ignore: imagesrcset is not yet in the link element type
+            // @ts-ignore: imagesrcset is not yet in the link element type.
             imagesrcset={imgAttributes.srcSet}
-            // @ts-ignore: imagesizes is not yet in the link element type
+            // @ts-ignore: imagesizes is not yet in the link element type.
             imagesizes={imgAttributes.sizes}
           ></link>
         </Head>