Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Add data-nimg attribute to image component (vercel#27899)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
atcastle authored Aug 11, 2021
1 parent 0023e07 commit 42c2ddd
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions packages/next/client/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,7 @@ export default function Image({
loader,
})}
decoding="async"
data-nimg
style={imgStyle}
className={className}
/>
Expand All @@ -609,6 +610,7 @@ export default function Image({
{...rest}
{...imgAttributes}
decoding="async"
data-nimg
className={className}
ref={(img) => {
setRef(img)
Expand All @@ -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>
Expand Down

0 comments on commit 42c2ddd

Please sign in to comment.