Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(common): allow string urls in NgOptimizedImage input #54901

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

JeanMeche
Copy link
Member

With this commit it is now possible to pass an url as placeholder for the image directive.

@JeanMeche JeanMeche force-pushed the refactor/image-placeholder-url branch from 0969c97 to 96ab532 Compare March 15, 2024 22:02
@JeanMeche JeanMeche force-pushed the refactor/image-placeholder-url branch from 96ab532 to d7f8d2b Compare April 1, 2024 11:08
@JeanMeche JeanMeche marked this pull request as ready for review April 1, 2024 11:09
@pullapprove pullapprove bot requested a review from dylhunn April 1, 2024 11:09
@jessicajaniuk jessicajaniuk added the area: common Issues related to APIs in the @angular/common package label Apr 2, 2024
@ngbot ngbot bot added this to the Backlog milestone Apr 2, 2024
@AndrewKushnir AndrewKushnir requested review from kara and removed request for dylhunn April 18, 2024 03:46
@AndrewKushnir AndrewKushnir added action: review The PR is still awaiting reviews from at least one requested reviewer target: minor This PR is targeted for the next minor release common: image directive labels Apr 18, 2024
@AndrewKushnir AndrewKushnir added target: rc This PR is targeted for the next release-candidate and removed target: minor This PR is targeted for the next minor release labels Apr 25, 2024
Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't we talk about throwing an error if the placeholder dimensions are too large? Concerned that we will allow folks to unintentionally add large placeholder images

@JeanMeche
Copy link
Member Author

I don't remember such a discussion, are we talking about pixel dimension or the image size (in kB) ?

Either way, here are my thoughts:

  • If we are talking about the width/height, It can be unrelated to image's intrinsic size.
  • If we are talking kB size, we don't have access to the image metadata loaded by background-image. We could imagine doing this for base64 images though.

@kara
Copy link
Contributor

kara commented May 6, 2024

@JeanMeche It's a requirement in the design doc (pinged you in the doc so you can see it). We didn't talk about it in any great detail, but the idea was to sanity check the dimensions (width/height). While it's true that dimensions != intrinsic size, we can still do a basic check. A placeholder that is 1000 x 1000 is egregious even if it's a simple image.

With this commit it is now possible to pass an url as placeholder for the image directive.
@@ -117,6 +117,11 @@ const FIXED_SRCSET_HEIGHT_LIMIT = 1080;
*/
export const PLACEHOLDER_BLUR_AMOUNT = 15;

/**
* Placeholder dimension (height or width) limit to warn when the crossed.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Placeholder dimension (height or width) limit to warn when the crossed.
* Placeholder dimension (height or width) limit in pixels. Angular produces a warning
* when this limit is crossed.

* Warns if placeholder's dimension are over a threshold.
*/
function assertPlaceholderDimensions(dir: NgOptimizedImage, width: number, height: number) {
if (width > PLACEHOLDER_DIMENSION_LIMIT || height > PLACEHOLDER_DIMENSION_LIMIT) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My understanding is that we want to check the size of a real placeholder image, not the width and height attribute values. @kara is that correct?

Copy link
Contributor

@dylhunn dylhunn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: fw-common, public-api

@pullapprove pullapprove bot requested a review from atscott May 7, 2024 02:48
Copy link
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: public-api

@AndrewKushnir AndrewKushnir added target: patch This PR is targeted for the next patch release and removed target: rc This PR is targeted for the next release-candidate labels May 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: review The PR is still awaiting reviews from at least one requested reviewer area: common Issues related to APIs in the @angular/common package common: image directive target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants