diff --git a/demo/pages/image.js b/demo/pages/image.js index a99dfb15c2..269ab49261 100644 --- a/demo/pages/image.js +++ b/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 = () => (
@@ -11,6 +12,9 @@ const Images = () => ( {' '} on Unsplash

+

+ netlify logomark +

) diff --git a/demo/pages/logomark.svg b/demo/pages/logomark.svg new file mode 100644 index 0000000000..c28257e583 --- /dev/null +++ b/demo/pages/logomark.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/lib/templates/imageFunction.js b/src/lib/templates/imageFunction.js index 28a6133b6e..a2633a22a1 100644 --- a/src/lib/templates/imageFunction.js +++ b/src/lib/templates/imageFunction.js @@ -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, }, } }