fix: use correct protocol for image source

Author: ascorbic

demo/pages/image.js

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import img from './unsplash.jpg'
+import logo from './logomark.svg'
 
 const Images = () => (
   <div>
@@ -11,6 +12,9 @@ const Images = () => (
       </a>{' '}
       on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
     </p>
+    <p>
+      <Image src={logo} alt="netlify logomark" />
+    </p>
   </div>
 )
 

demo/pages/logomark.svg

@@ -39,10 +39,15 @@ const handler = async (event) => {
   const quality = parseInt(q) || 60
 
   let imageUrl
+  let isRemoteImage = false
   // Relative image
   if (parsedUrl.startsWith('/')) {
-    imageUrl = `${process.env.DEPLOY_URL || `http://${event.headers.host}`}${parsedUrl}`
+    imageUrl = `${event.protocol || (event.headers.scheme && `${event.headers.scheme}:`) || 'http:'}//${
+      event.headers.host || event.hostname
+    }${parsedUrl}`
+    console.log({ imageUrl })
   } else {
+    isRemoteImage = true
     // Remote images need to be in the allowlist
     const allowedDomains = process.env.NEXT_IMAGE_ALLOWED_DOMAINS
       ? process.env.NEXT_IMAGE_ALLOWED_DOMAINS.split(',').map((domain) => domain.trim())
@@ -96,7 +101,8 @@ const handler = async (event) => {
     return {
       statusCode: 302,
       headers: {
-        Location: imageUrl,
+        Location: isRemoteImage ? imageUrl : parsedUrl,
+        'X-Event': JSON.stringify(event),
       },
     }
   }