Do not generate a srcset if the loader being used is the default noopImageLoader. This loader does not take width into account, so it does not make sense to use it with srcsets.
PR Close#47804
In v14.2, we've introduced a new directive to help developers to configure images for better performance. The directive was initially released in the "developer preview" mode. We've collected the feedback, made several improvements and we are happy to announce that the NgOptimizedImage APIs are promoted to stable!
This commit updates vast majority of APIs to drop the `@developerPreview` label, which effectively documents them as stable.
There are few APIs though that retained the `@developerPreview` annotations:
- the `IMAGE_CONFIG` token
- the `ImageConfig` type
- the `fill` @Input of the directive
We plan to collect some additional feedback for the mentioned APIs and drop the `@developerPreview` annotation after that.
PR Close#47794
This is a small commit to:
- clarify that loaders aren't mandatory
- remove outdated preconnect option from docs
- clarify how width/height should be set for fixed size images
- minor structural changes for clarity
PR Close#47796
The current error that is thrown when the "width" or
"height" attributes is missing doesn't mention that
"fill" mode is another option. This commit updates
the error with that option.
PR Close#47797
This commit updates the NgOptimizedImage directive to:
- drop a deprecated selector (the `rawSrc` one)
- drop corresponding input getter
The `rawSrc` was replaced by the `ngSrc` one during the developer preview phase.
PR Close#47798
This commit adds a missing warning if the image directive
detects that you're hosting your image on one of our
supported image CDNs but you're not using the built-in loader
for it. This excludes applications that are using a custom
loader.
PR Close#47330
Add a new boolean attribute to NgOptimizedImage called `fill` which does the following:
* Removes the requirement for height and width
* Adds inline styling to cause the image to fill its containing element
* Adds a default `sizes` value of `100vw` which will cause the image to have a responsive srcset automatically generated
PR Close#47738
This commit adds a logic that generates preload tags for priority images, when rendering happens on the server (e.g. Angular Universal).
PR Close#47343
Add a feature to automatically generate the srcset attribute for images using the NgOptimizedImage directive. Uses the 'sizes' attribute to determine the appropriate srcset to generate.
PR Close#47547
This commit introduces a new `DATE_PIPE_DEFAULT_OPTIONS` token, which
can be used to configure default DatePipe options, such as date
format and timezone.
DEPRECATED:
The `DATE_PIPE_DEFAULT_TIMEZONE` token is now deprecated in favor
of the `DATE_PIPE_DEFAULT_OPTIONS` token, which accepts an object
as a value and the timezone can be defined as a field (called `timezone`)
on that object.
PR Close#47157
Previously the built-in image loaders for the optimized image directive
were tightly coupled to the preconnect checks infrastructure. This was
creating a problem when developers were trying to provide a loader on
a component level (or, more generally, deeper in the DI hierarchy):
- PreconnectLinkChecker is the application-level service, provided in root;
- it makes sense to provide loaders in different parts of the DI hierarchy;
This refactoring removes the PreconnectLinkChecker configuration from
the loaders infrastructure and makes it application-wide config. The
PRECONNECT_CHECK_BLOCKLIST is also a simple provider (it was a
multi-provider previously) which should make the overall configuration
easier.
PR Close#47565
As an ongoing effort to stabilize the NgOptimizedImage API before existing the Developer Preview, this commit renames the `rawSrc` attribute used for the NgOptimizedImage selector matching to `ngSrc`. The `rawSrcset` is also renamed to `ngSrcset` for consistency.
The motivation for this change is to align the attribute name better with other built-in directives, such as `ngFor`, `ngIf`, `ngClass`, `ngStyle`, etc.
Note: this is technically a breaking change, but since the NgOptimizedImage directive is in the Developer Preview mode, we land the change in a patch branch.
PR Close#47362
This commit adds a re-export of the `NgForOf` class as `NgFor` to improve the DX for cases when the directive is used as standalone. Developers can import `NgFor` class, which better matches the `ngFor` attribute used in a template.
PR Close#47309
`PreconnectLinkChecker` checks to see if preconnect links have been added to the `<head>` element but uses `document` directly which does not exist when rendering in Angular Universal. This PR switches the `PreconnectLinkChecker` to use the `DOCUMENT` token instead so that the query works when SSR'ing
PR Close#47353
This is a tiny fix to add paragraph breaks in
image distortion warnings to make them a bit
easier to read. With this change, the intrinsic
and rendered image sizes are printed on their
own lines instead of mid-paragraph.
PR Close#47299
The NgOptimizedImage directive was previously trying to use an
already destroyed injector in the ngOnDestroy callback. This fix
pre-injects necessery tokens so no injector calls are done
in the destroy process.
PR Close#47243
Valid density descriptors used in the NgOptimizedImage can contain multiple
digits (ex. 1.25x, 25x). This change fixes the issue where density descriptors
with multiple digits (ex. 25x) where considered invalid.
Please note that a valid density descriptor might still be rejected by the
directive's validation logic if the supplied value is too big.
PR Close#47230
This commit fixes a bug where `rawSrcset` in the image
directive would allow density descriptors like `1.5x`
but not like `1.25x`. Now descriptors with 2+ digits
after the decimal point should work.
PR Close#47197
This is a tiny commit to add newlines in the image
directive's "oversized image" error. Currently, the
rendered and intrinsic image sizes are printed
mid-line, which make them a little hard to read.
This commit puts them each on their own line.
PR Close#47188
This commit adds a console warning in development mode
if the ultimate rendered size of the image is much
smaller than the dimensions of the requested image.
In this case, the warning recommends adjusting the
size of the source image or using the `rawSrcset`
attribute to implement responsive sizing.
PR Close#47082
This commit cleans up some stylistic nits and
moves functions out of util.ts into files that
are more specifically named (url.ts and error.ts).
PR Close#47082
This commit fixes a bug in NgOptimizedImage where
if you bound the width or height attribute (e.g.
`[width]=width`), the attribute would only be
reflected as "ng-reflect-x". The actual "width" or
"height" attribute would not be set on the host
element. This is a problem because the exact named
attribute must be set on the element for the
browser to detect it and use it to reserve space
for the image (and thus prevent CLS).
PR Close#47082
This commit adds the docs for the NgOptimizedImage directive.
As a part of this commit, we also remove an export of directive-related symbols previously exposed as public APIs (i.e. APIs can not be used directly).
PR Close#47082
With this commit, the NgOptimizedImage directive will throw
a runtime error if it detects that one of the density descriptors
in rawSrcset is higher than 3x. It's generally not recommended
to use density descriptors higher than ~2, as it causes image to
download at very large sizes on mobile screens (thus slowing down
LCP). The density max is set conservatively to 3 in case apps
expect users to zoom in.
In future commits, we may want to throw even at densities >
than 2 and provide a configuration override for the zoom case.
PR Close#47082
This commit updates the logic of Image Loaders to throw an error in case an absolute URL is provided an an input to the loader function. The loaders can construct URLs based on image paths relative to the bas URL configured for a loader.
PR Close#47082
This reverts commit a0fdb8c7e9.
The `src` and `srcset` attributes don't pose security threats in modern browser, so sanitization is not really necessary.
PR Close#47082
This refactoring pulls url-related error reporting into one place.
It also makes sure that error messages and the related error
reporting logic are tree-shakable.
PR Close#47082
Refactoring tests made me realise that we are misinterpreting the
ensurePreconnect option - in fact it should configure the
PRECONNECT_CHECK_BLOCKLIST provider _only_ if the ensurePreconnect
is set to false.
PR Close#47082
This change introduces common infrastructure for image
loaders. This removes code duplication and makes it
easier to write loaders - a loader author just needs
to provide a loader config to the URL mapping function.
PR Close#47082
This commit modifies the provideCloudinaryLoader and provideImageKitLoader functions to support an additional ensurePreconnect option, similar to the Imgix loader functions.
PR Close#47082
Andrew Kushnir