Support passing image transformation via query parameters in Image directive via ImageKit loader

[exequiel09]

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

common

Description

Currently, the ImageKit loader for the NgOptimizedImage directive passes transformation in the middle of the URL which is the default way of providing transformation parameters in ImageKit:

https://github.com/angular/angular/blob/b6e3840ed4f52b1fcf564cec642e63ddf358aab8/packages/common/src/directives/ng_optimized_image/image_loaders/imagekit_loader.ts#L43-L49

But, ImageKit also supports passing transformation parameters in the query parameters. Reference: https://docs.imagekit.io/features/image-transformations/resize-crop-and-other-transformations#example-all-padding-on-one-side

I think if we support the query parameter version of ImageKit, developers who use ImageKit would be able to add more transformations via query URL and just add the width by default via the loader function just like what ImgIX loader does.

https://github.com/angular/angular/blob/b6e3840ed4f52b1fcf564cec642e63ddf358aab8/packages/common/src/directives/ng_optimized_image/image_loaders/imgix_loader.ts#L40-L45

Proposed solution

Support both ways of providing transformation parameters in URL path or query parameter. I also tested, using both query and path part in an image and it doesn't work. So just give the developer the option to use one of the two via configuration options.

Alternatives considered

For now, just create custom loader for ImageKit that passes transformation via query parameters

[atcastle]

I'm starting work on an enhancement to the ngOptimizedImage API that will give it a lot more flexibility: #48826 It doesn't directly address this issue, but will be an important first step.

[angular-robot[bot]]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[exequiel09]

Already done in #48907. Also it's backported to v14.3

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}