Fix missing Content-Length header from Image Optimization API (#36581)

Fixes #35514

Author: styfle

packages/next/server/image-optimizer.ts

@@ -621,6 +621,7 @@ export function sendResponse(
     contentSecurityPolicy
   )
   if (!result.finished) {
+    res.setHeader('Content-Length', Buffer.byteLength(buffer))
     res.end(buffer)
   }
 }

test/integration/image-optimizer/test/util.js

@@ -70,10 +70,13 @@ export async function fsToJson(dir, output = {}) {
   return output
 }
 
-export async function expectWidth(res, w) {
+export async function expectWidth(res, w, { expectAnimated = false } = {}) {
   const buffer = await res.buffer()
   const d = sizeOf(buffer)
   expect(d.width).toBe(w)
+  const lengthStr = res.headers.get('Content-Length')
+  expect(lengthStr).toBe(Buffer.byteLength(buffer).toString())
+  expect(isAnimated(buffer)).toBe(expectAnimated)
 }
 
 export const cleanImagesDir = async (ctx) => {
@@ -170,7 +173,7 @@ export function runTests(ctx) {
     expect(res.headers.get('Content-Disposition')).toBe(
       `inline; filename="animated.gif"`
     )
-    expect(isAnimated(await res.buffer())).toBe(true)
+    await expectWidth(res, 50, { expectAnimated: true })
   })
 
   it('should maintain animated png', async () => {
@@ -186,7 +189,7 @@ export function runTests(ctx) {
     expect(res.headers.get('Content-Disposition')).toBe(
       `inline; filename="animated.png"`
     )
-    expect(isAnimated(await res.buffer())).toBe(true)
+    await expectWidth(res, 100, { expectAnimated: true })
   })
 
   it('should maintain animated png 2', async () => {
@@ -202,7 +205,7 @@ export function runTests(ctx) {
     expect(res.headers.get('Content-Disposition')).toBe(
       `inline; filename="animated2.png"`
     )
-    expect(isAnimated(await res.buffer())).toBe(true)
+    await expectWidth(res, 1105, { expectAnimated: true })
   })
 
   it('should maintain animated webp', async () => {
@@ -218,7 +221,7 @@ export function runTests(ctx) {
     expect(res.headers.get('Content-Disposition')).toBe(
       `inline; filename="animated.webp"`
     )
-    expect(isAnimated(await res.buffer())).toBe(true)
+    await expectWidth(res, 400, { expectAnimated: true })
   })
 
   if (ctx.dangerouslyAllowSVG) {
@@ -227,6 +230,7 @@ export function runTests(ctx) {
       const opts = { headers: { accept: 'image/webp' } }
       const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts)
       expect(res.status).toBe(200)
+      expect(res.headers.get('Content-Length')).toBe('603')
       expect(res.headers.get('Content-Type')).toContain('image/svg+xml')
       expect(res.headers.get('Cache-Control')).toBe(
         `public, max-age=0, must-revalidate`
@@ -329,6 +333,7 @@ export function runTests(ctx) {
     expect(res.headers.get('Content-Disposition')).toBe(
       `inline; filename="test.jpeg"`
     )
+    await expectWidth(res, ctx.w)
   })
 
   if (!ctx.isOutdatedSharp) {
@@ -348,6 +353,7 @@ export function runTests(ctx) {
       expect(res.headers.get('Content-Disposition')).toBe(
         `inline; filename="test.jpeg"`
       )
+      await expectWidth(res, ctx.w)
     })
   }