Add at attribute to image preload link (#16328)

Fixes a small error in the image preload post-processor. Adds a needed 'as' attribute to the link.

packages/next/next-server/lib/post-process.ts

@@ -179,7 +179,8 @@ class ImageOptimizerMiddleware implements PostProcessMiddleware {
     let imagePreloadTags = _data.preloads.images
       .filter((imgHref) => !preloadTagAlreadyExists(markup, imgHref))
       .reduce(
-        (acc, imgHref) => acc + `<link rel="preload" href="${imgHref}"/>`,
+        (acc, imgHref) =>
+          acc + `<link rel="preload" href="${imgHref}" as="image"/>`,
         ''
       )
     return result.replace(

test/integration/image-optimization/test/index.test.js

@@ -30,31 +30,37 @@ function runTests() {
 function checkImagesOnPage(path) {
   it('should not preload tiny images', async () => {
     const html = await renderViaHTTP(appPort, path)
-    expect(html).not.toContain('<link rel="preload" href="tiny-image.jpg"/>')
+    expect(html).not.toContain(
+      '<link rel="preload" href="tiny-image.jpg" as="image"/>'
+    )
   })
   it('should not add a preload if one already exists', async () => {
     let html = await renderViaHTTP(appPort, path)
     html = html.replace(
-      '<link rel="preload" href="already-preloaded.jpg"/>',
+      '<link rel="preload" href="already-preloaded.jpg" as="image"/>',
       ''
     )
     expect(html).not.toContain(
-      '<link rel="preload" href="already-preloaded.jpg"/>'
+      '<link rel="preload" href="already-preloaded.jpg" as="image"/>'
     )
   })
   it('should not preload hidden images', async () => {
     const html = await renderViaHTTP(appPort, path)
     expect(html).not.toContain(
-      '<link rel="preload" href="hidden-image-1.jpg"/>'
+      '<link rel="preload" href="hidden-image-1.jpg" as="image"/>'
     )
     expect(html).not.toContain(
-      '<link rel="preload" href="hidden-image-2.jpg"/>'
+      '<link rel="preload" href="hidden-image-2.jpg" as="image"/>'
     )
   })
   it('should preload exactly two eligible images', async () => {
     const html = await renderViaHTTP(appPort, path)
-    expect(html).toContain('<link rel="preload" href="main-image-1.jpg"/>')
-    expect(html).not.toContain('<link rel="preload" href="main-image-2.jpg"/>')
+    expect(html).toContain(
+      '<link rel="preload" href="main-image-1.jpg" as="image"/>'
+    )
+    expect(html).not.toContain(
+      '<link rel="preload" href="main-image-2.jpg" as="image"/>'
+    )
   })
 }