Commit graph

170 commits

Author SHA1 Message Date
Tim Neutkens
58c161c99b
Fix flashing of no-src image when using next/image (#18195)
Solves on of the issues in https://github.com/vercel/next.js/issues/18122
2020-10-24 15:23:42 +00:00
Steven
301c029e48
Add support for string width/height on Image component (#18178)
For many users refactoring from `<img>` to `<Image>`, we can often support their properties as-is.
The exception was width/height.

This PR allows the `<Image>` component to accept strings for `width` and `height` just like `<img>`.

Related to #18122
2020-10-24 02:01:15 +00:00
Steven
a12eeea18d
Add w param (#18151)
Add missing `w` param for [old browsers](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset#Browser_compatibility) like IE that dont support `srcset` (@styfle)
2020-10-23 14:23:16 +00:00
Yamagishi Kazutoshi
f1005ca661
Pass quality param of image component to preload (#18158)
If give the `priority` and `quality` attributes to an Image Component, the `quality` attribute will not be given to the preload and a warning will be displayed to the devtool.

![screenshot on devtool](https://user-images.githubusercontent.com/12539/96960307-0837e000-153d-11eb-8c01-e15afd40e04f.png)
2020-10-23 06:36:54 +00:00
Steven
07adc8ef26
Change Image component lazy=true to loading=lazy (#18138)
This PR updates the `<Image>` component to follow the same property naming as native `<img>`.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-loading

This currently allows two values,`loading=lazy` and `loading=eager`, but there might be new values added in a future spec.

cc @atcastle
2020-10-22 18:59:42 +00:00
Tim Neutkens
9fb1e60504
Make lazy-loading the default for next/image (#18123)
Co-authored-by: Steven <steven@ceriously.com>
2020-10-22 16:55:51 +02:00
Steven
755934d0fc
Fix merge conflict (#18106) 2020-10-21 21:55:02 +02:00
Steven
3f07e554f4
Fix Image component defaults & remove autoOptimize (#18101) 2020-10-21 21:39:12 +02:00
Alex Castle
1a8cb7e1a0
Image Component: Support for Akamai image CDN (#18100) 2020-10-21 21:31:28 +02:00
Steven
e8f402adfa
Add unsized property to Image component (#18059)
Implements the `unsized` property from RFC #16832

cc @atcastle
2020-10-21 10:03:31 +00:00
Steven
0fb39e2347
Add width and height props to Image component (#18031)
Co-authored-by: Tim Neutkens <timneutkens@me.com>
2020-10-20 18:43:24 +02:00
Alex Castle
01e6bd1684
Remove multi-host support for image component and support quality pass-through (#18038)
Co-authored-by: Tim Neutkens <timneutkens@me.com>
2020-10-20 16:28:01 +02:00
Yamagishi Kazutoshi
753bb9fdba
Fix types for lazy image component (#17984)
Follow-up #17916

Correcting type errors and organizing redundant descriptions.
2020-10-18 10:41:25 +00:00
Alex Castle
c9eb3dcad9
Image component lazy loading (#17916)
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2020-10-17 20:55:29 +02:00
Tim Neutkens
b37835ac9c
Make sure w parameter is only included when a width is provided. (#17971) 2020-10-17 18:24:06 +02:00
Yamagishi Kazutoshi
6bc6e2c494
Improve types for Image Component (#17954)
![Screenshot on VS Code](https://user-images.githubusercontent.com/12539/96300300-43fc1280-1030-11eb-89ae-dba8beeca583.png)

The only attribute that must be used with Image Component is src, but all attributes are required and TypeScript will warn you.
2020-10-16 20:04:39 +00:00
Yamagishi Kazutoshi
6f13956f12
Unify config.image.breakpoints to config.image.sizes (#17953)
Unify the confusing `config.images.sizes` ([Image Optimizer](https://github.com/vercel/next.js/discussions/17141)) and `config.images.breakpoints` ([Image Component](https://github.com/vercel/next.js/discussions/16832)).
2020-10-16 19:36:31 +00:00
Yamagishi Kazutoshi
5f7c6ae8d8
Fix width param name for Image Optimizer (#17952)
Image Optimizer only accepts the name of the width parameter as a `w`.

ref https://github.com/vercel/next.js/blob/v9.5.6-canary.3/packages/next/next-server/server/image-optimizer.ts#L71
2020-10-16 18:48:50 +00:00
Tim Neutkens
4f59209bf2
Update default configuration to match image optimization (#17943)
Co-authored-by: Steven <steven@ceriously.com>
2020-10-16 19:09:18 +02:00
Alex Castle
87175fe9df
Image component foundation (#17343)
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
2020-10-14 11:57:10 +02:00