[WIP] Next.js Image Component

Keeping track of the feedback so far:

• #18195 Lazy loading flickers a <img> with empty or not found src icon
• #18123 Images that are rendered in a flexbox are not lazy loaded (@timneutkens)
• #18123 Lazy loading has to be the default (@timneutkens)
• #18123 Throw error when width and height are missing and unsized is not set (@styfle)
• #18138 Rename lazy=true to loading=lazy to match web standard (@styfle)
• #18147 Prevent upscaling images, API should never return an image width larger than the source image width (@styfle)
• #18107 Add documentation for next/image and automatic image optimization (@styfle)
• #18149 Correctly encode the url parameter (@ijjk)
• #18151 Add missing w param for old browsers like IE that dont support srcset (@styfle)
• #18178 Add support for string width and height attributes (use parseInt and error) (@styfle)
• #18152 Errors from image optimization need to be surfaced, ie better message when absolute url is not in domains (@ijjk)
• Lazy loading can probably be converted to effect + state (@atcastle @devknoll)
• #18217 Limit maximum number of images.domains and images.sizes to 50, maximum value of size to 10000
• #18179 Ignore svg for optimization (vector images can be considered already optimized) (@styfle)
• #5321 Only enable Vercel API in @vercel/next when loader=default (@styfle)
• #18211 Only enable Next API when loader=default (@styfle)
• #18236 Fix srcset to ensure the components width is the largest possible image (@styfle)
• #18267 Separate deviceSizes and iconsSizes (@styfle)
• #18224 The quality attribute should allow number or string like width (@ykzts)
• #18298 Fix redirect in next dev for /_next/image/ to /_next/image (@styfle)
• E2E tests to compare next dev and Vercel deployments
• #18424 #18325 Add err.sh links for all errors
• Deploy to nextjs.org (start with /next/conf) (@leerob)
• Deploy to vercel.com (start with @geist/image/new)

[mirshko]

I’m wondering if there’s plans for a Contentful loader?

Contentful has an Image API similar to Imgix or Cloudinary, wondering it makes sense to use that directly?

[AlexandraKlein]

@styfle Just to be clear, the // prefix is being used by Contentful (and possibly other CMSes) as the prefix for URLs for image assets. I agree it’d be best to use https when referencing external images, but at the moment there is some user-level intervention required to do this, at least when referencing images served by Contentful. 😃

@AlexandraKlein Here’s what I’ve got:

module.exports = {
  images: {
    domains: [
      'images.ctfassets.net'
    ]
  }
}

What I’m doing is prepending https: to my src when using the Image component.

This works fine locally for me but urls give me 400 errors in production with "url" parameter is required response.

Source url with 400 error: https://mywebsite.com/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F1xkvhwkgcr51%2F6HODBVSFqUTbEKI7ilXx%2Ff9f16ab3552e973b764c922f06db181a%2Fmy-image.png&w=1200&q=75

Source url locally with no error: http://localhost:3000/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2F1xkvhwkgcr51%2F6HODBVSFqUTbEKI7ilXx%2Ff9f16ab3552e973b764c922f06db181a%2Fmy-image.png&w=1200&q=75