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

common

Description

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.