From 7198cbe093f68b28969172a2aa2bc795b03d1229 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Tue, 18 Aug 2020 14:14:42 -0700
Subject: [PATCH] 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 |  3 ++-
 .../image-optimization/test/index.test.js     | 20 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index a64778c4ea..d922a56bd1 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/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(
diff --git a/test/integration/image-optimization/test/index.test.js b/test/integration/image-optimization/test/index.test.js
index f2da1b5e47..efa9cacb45 100644
--- a/test/integration/image-optimization/test/index.test.js
+++ b/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"/>'
+    )
   })
 }
 
-- 
GitLab