Skip to content

Commit 12eb812

Browse files
authored
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.
1 parent b4be678 commit 12eb812

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

packages/next/client/image.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -600,6 +600,7 @@ export default function Image({
600600
loader,
601601
})}
602602
decoding="async"
603+
data-nimg
603604
style={imgStyle}
604605
className={className}
605606
/>
@@ -609,6 +610,7 @@ export default function Image({
609610
{...rest}
610611
{...imgAttributes}
611612
decoding="async"
613+
data-nimg
612614
className={className}
613615
ref={(img) => {
614616
setRef(img)
@@ -633,9 +635,9 @@ export default function Image({
633635
rel="preload"
634636
as="image"
635637
href={imgAttributes.srcSet ? undefined : imgAttributes.src}
636-
// @ts-ignore: imagesrcset is not yet in the link element type
638+
// @ts-ignore: imagesrcset is not yet in the link element type.
637639
imagesrcset={imgAttributes.srcSet}
638-
// @ts-ignore: imagesizes is not yet in the link element type
640+
// @ts-ignore: imagesizes is not yet in the link element type.
639641
imagesizes={imgAttributes.sizes}
640642
></link>
641643
</Head>

0 commit comments

Comments
 (0)