Skip to content

Commit cd86eb4

Browse files
JeanMecheAndrewKushnir
JeanMeche
authored and
AndrewKushnir
committed
refactor(common): Reduce the precision to 2 digits in the ngOptimizedImage distortion warning message (#50276)
Using toFixed(). fixes #50273 PR Close #50276
1 parent 165b8b6 commit cd86eb4

2 files changed

Lines changed: 17 additions & 10 deletions

File tree

‎packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -834,18 +834,20 @@ function assertNoImageDistortion(
834834
`${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the image does not match ` +
835835
`the aspect ratio indicated by the width and height attributes. ` +
836836
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
837-
`(aspect-ratio: ${intrinsicAspectRatio}). \nSupplied width and height attributes: ` +
838-
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${suppliedAspectRatio}). ` +
837+
`(aspect-ratio: ${
838+
round(intrinsicAspectRatio)}). \nSupplied width and height attributes: ` +
839+
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${
840+
round(suppliedAspectRatio)}). ` +
839841
`\nTo fix this, update the width and height attributes.`));
840842
} else if (stylingDistortion) {
841843
console.warn(formatRuntimeError(
842844
RuntimeErrorCode.INVALID_INPUT,
843845
`${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the rendered image ` +
844846
`does not match the image's intrinsic aspect ratio. ` +
845847
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
846-
`(aspect-ratio: ${intrinsicAspectRatio}). \nRendered image size: ` +
848+
`(aspect-ratio: ${round(intrinsicAspectRatio)}). \nRendered image size: ` +
847849
`${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` +
848-
`${renderedAspectRatio}). \nThis issue can occur if "width" and "height" ` +
850+
`${round(renderedAspectRatio)}). \nThis issue can occur if "width" and "height" ` +
849851
`attributes are added to an image without updating the corresponding ` +
850852
`image styling. To fix this, adjust image styling. In most cases, ` +
851853
`adding "height: auto" or "width: auto" to the image styling will fix ` +
@@ -1012,3 +1014,8 @@ function assertNoLoaderParamsWithoutLoader(dir: NgOptimizedImage, imageLoader: I
10121014
`To fix this, provide a custom loader or remove the \`loaderParams\` attribute from the image.`));
10131015
}
10141016
}
1017+
1018+
1019+
function round(input: number): number|string {
1020+
return Number.isInteger(input) ? input : input.toFixed(2);
1021+
}

‎packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ describe('NgOptimizedImage directive', () => {
3939
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
4040
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
4141
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
42-
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
42+
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.87). ' +
4343
'\\nTo fix this, update the width and height attributes.');
4444

4545
expectErrorMessageInLogs(
@@ -48,7 +48,7 @@ describe('NgOptimizedImage directive', () => {
4848
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
4949
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
5050
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
51-
'\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' +
51+
'\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.10). ' +
5252
'\\nTo fix this, update the width and height attributes.');
5353

5454
// Images with incorrect styling
@@ -58,7 +58,7 @@ describe('NgOptimizedImage directive', () => {
5858
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
5959
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
6060
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
61-
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
61+
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.33). ' +
6262
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
6363
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
6464
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
@@ -81,7 +81,7 @@ describe('NgOptimizedImage directive', () => {
8181
'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
8282
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
8383
'\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
84-
'\\nRendered image size: 100w x 500h (aspect-ratio: 0.2). ' +
84+
'\\nRendered image size: 100w x 500h (aspect-ratio: 0.20). ' +
8585
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
8686
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
8787
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
@@ -91,7 +91,7 @@ describe('NgOptimizedImage directive', () => {
9191
'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
9292
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
9393
'\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
94-
'\\nRendered image size: 200w x 400h (aspect-ratio: 0.5). ' +
94+
'\\nRendered image size: 200w x 400h (aspect-ratio: 0.50). ' +
9595
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
9696
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
9797
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
@@ -105,7 +105,7 @@ describe('NgOptimizedImage directive', () => {
105105
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
106106
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
107107
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
108-
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
108+
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.60). ' +
109109
'\\nTo fix this, update the width and height attributes.');
110110
});
111111
});

0 commit comments

Comments
 (0)