Provide an API for passing additional data to ngOptimizedImage loaders

This issue has been tracked since 2023-01-24.

Which @angular/* package(s) are relevant/related to the feature request?



The ngOptimizedImage loader API currently is hardcoded such that the provided loader function only received two data points from the image directive: src and width. This is not flexible enough to support image CDNs with a variety of URL-based image transformations.

The image loader API enhanced should be enhanced to allow users to pass arbitrary attributes through to the loader for use in the construction of image URLs.

CC @AndrewKushnir @pkozlowski-opensource

Proposed solution

I'm proposing we allow the user to pass data through to the loader using a special attribute that receives an object with arbitrary payload, and then passes that data along to the loader. This would look something like the following:

<img ngSrc="test.jpg" width="300" height="200" [loaderParams]={ 
  c_crop: true, 
  g_face: true, 
  crop_height: 400, 
  crop_width: 400} >

To keep the template from becoming too unreadable, presumably many developers would opt to define the loader parameters in the TypeScript:

const loaderProps: LoaderProps = {
  c_crop: true, 
  g_face: true, 
  crop_height: 400, 
  crop_width: 400 }

This would require the LoaderProps type to have been defined or imported. The loaderProps could then be consumed as so:

<img ngSrc="test.jpg" width="300" height="200" [loaderParams]=”loaderProps” >

Alternatives considered

I also considered passing additional query parameters in a plain string blob, but the proposed data structure lends itself a lot better to typing the data.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2023-03-21
Star Count 87006
Watcher Count 3028
Fork Count 23170
Issue Count 1418


Issue Title Created Date Updated Date