Add fetchpriority="high" when next/image has priority prop 📷

packages/next/client/image.tsx

@@ -355,6 +355,64 @@ function handleLoading(
   })
 }
 
+sanjaiyan-image-loading-priority
+const ImageElement = ({
+  imgAttributes,
+  heightInt,
+  widthInt,
+  qualityInt,
+  className,
+  imgStyle,
+  blurStyle,
+  isLazy,
+  fill,
+  placeholder,
+  loading,
+  priority,
+  srcString,
+  config,
+  unoptimized,
+  loader,
+  onLoadRef,
+  onLoadingCompleteRef,
+  setBlurComplete,
+  setShowAltText,
+  onLoad,
+  onError,
+  ...rest
+}: ImageElementProps) => {
+  loading = isLazy ? 'lazy' : loading
+  return (
+    <>
+      <img
+        {...rest}
+        {...imgAttributes}
+        width={widthInt}
+        height={heightInt}
+        decoding="async"
+        // https://web.dev/priority-hints/#increase-the-priority-of-the-lcp-image
+        fetchPriority={priority ? "high" : rest.fetchPriority}
+        data-nimg={fill ? 'fill' : '1'}
+        className={className}
+        // @ts-ignore - TODO: upgrade to `@types/react@17`
+        loading={loading}
+        style={{ ...imgStyle, ...blurStyle }}
+        ref={useCallback(
+          (img: ImgElementWithDataProp | null) => {
+            if (!img) {
+              return
+            }
+            if (onError) {
+              // If the image has an error before react hydrates, then the error is lost.
+              // The workaround is to wait until the image is mounted which is after hydration,
+              // then we set the src again to trigger the error handler (if there was an error).
+              // eslint-disable-next-line no-self-assign
+              img.src = img.src
+            }
+            if (process.env.NODE_ENV !== 'production') {
+              if (!srcString) {
+                console.error(`Image is missing required "src" property:`, img)
+
 const ImageElement = forwardRef<HTMLImageElement | null, ImageElementProps>(
   (
     {
@@ -406,6 +464,7 @@ const ImageElement = forwardRef<HTMLImageElement | null, ImageElementProps>(
               }
               if (!img) {
                 return
+ canary
               }
               if (onError) {
                 // If the image has an error before react hydrates, then the error is lost.