Files
angular__angular/packages
Kara Erickson 57f3386e5b feat(common): support custom srcset attributes in NgOptimizedImage (#47082)
This commit adds a `rawSrcset` attribute as a replacement for the
`srcset` attribute. The `srcset` attribute cannot be set statically
on the image directive because it would cause images to start
downloading before the "loading" attribute could be set to "lazy".

Changing the name to `rawSrcset` allows the directive to control
the timing of image loading. It also makes it possible to support
custom loaders for `srcset` file names. Rather than having to repeat
the image origin for each image, the existing `rawSrc` value and
image loader can be composed to generate each full URL string. The
developer must only provide the necessary widths for the `srcset`.

For example, the developer might write:

```markup
<img rawSrc="hermes.jpg" rawSrcset="100w, 200w" ... />
```

with a loader like:

```js
const loader = (config) => `path/${config.src}?w=${config.width}`;
```

and the img tag will ultimately be set up as something like:

```markup
<img src="path/hermes.jpg?w=100" srcset="path/hermes.jpg?w=100 100w, path/hermes.jpg?w=200 200w" .../>
```

PR Close #47082
2022-08-16 17:36:52 +00:00
..
…
…
…

Angular

The sources for this package are in the main Angular repo. Please file issues and pull requests against that repo.

Usage information and reference details can be found in Angular documentation.

License: MIT