fix: use correct protocol for image source (#467)

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,13 @@ 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}`
+    const protocol = event.headers['x-nf-connection-proto'] || event.headers['x-forwarded-proto'] || 'http'
+    imageUrl = `${protocol}://${event.headers.host || event.hostname}${parsedUrl}`
   } 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 +99,7 @@ const handler = async (event) => {
     return {
       statusCode: 302,
       headers: {
-        Location: imageUrl,
+        Location: isRemoteImage ? imageUrl : parsedUrl,
       },
     }
   }