Skip to content

Commit

Permalink
refactor(common): Reduce the precision to 2 digits in the ngOptimized…
Browse files Browse the repository at this point in the history 
…Image distortion warning message (#50276)

Using toFixed().

fixes #50273

PR Close #50276
  • Loading branch information
@JeanMeche @AndrewKushnir
JeanMeche authored and AndrewKushnir committed May 16, 2023
1 parent 7d679bd commit cc964f8
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 10 deletions.
15 changes: 11 additions & 4 deletions packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -834,18 +834,20 @@ function assertNoImageDistortion(
`${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the image does not match ` +
`the aspect ratio indicated by the width and height attributes. ` +
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). \nSupplied width and height attributes: ` +
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${suppliedAspectRatio}). ` +
`(aspect-ratio: ${
round(intrinsicAspectRatio)}). \nSupplied width and height attributes: ` +
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${
round(suppliedAspectRatio)}). ` +
`\nTo fix this, update the width and height attributes.`));
} else if (stylingDistortion) {
console.warn(formatRuntimeError(
RuntimeErrorCode.INVALID_INPUT,
`${imgDirectiveDetails(dir.ngSrc)} the aspect ratio of the rendered image ` +
`does not match the image's intrinsic aspect ratio. ` +
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
`(aspect-ratio: ${intrinsicAspectRatio}). \nRendered image size: ` +
`(aspect-ratio: ${round(intrinsicAspectRatio)}). \nRendered image size: ` +
`${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` +
`${renderedAspectRatio}). \nThis issue can occur if "width" and "height" ` +
`${round(renderedAspectRatio)}). \nThis issue can occur if "width" and "height" ` +
`attributes are added to an image without updating the corresponding ` +
`image styling. To fix this, adjust image styling. In most cases, ` +
`adding "height: auto" or "width: auto" to the image styling will fix ` +
Expand Down Expand Up @@ -1012,3 +1014,8 @@ function assertNoLoaderParamsWithoutLoader(dir: NgOptimizedImage, imageLoader: I
`To fix this, provide a custom loader or remove the \`loaderParams\` attribute from the image.`));
}
}


function round(input: number): number|string {
return Number.isInteger(input) ? input : input.toFixed(2);
}
12 changes: 6 additions & 6 deletions ...ages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.e2e-spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ describe('NgOptimizedImage directive', () => {
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.87). ' +
'\\nTo fix this, update the width and height attributes.');

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

// Images with incorrect styling
Expand All @@ -58,7 +58,7 @@ describe('NgOptimizedImage directive', () => {
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.33). ' +
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
Expand All @@ -81,7 +81,7 @@ describe('NgOptimizedImage directive', () => {
'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
'\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
'\\nRendered image size: 100w x 500h (aspect-ratio: 0.2). ' +
'\\nRendered image size: 100w x 500h (aspect-ratio: 0.20). ' +
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
Expand All @@ -91,7 +91,7 @@ describe('NgOptimizedImage directive', () => {
'with the \`ngSrc=\\"/e2e/logo-500w.jpg\\"`) has detected that ' +
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
'\\nIntrinsic image size: 500w x 500h (aspect-ratio: 1). ' +
'\\nRendered image size: 200w x 400h (aspect-ratio: 0.5). ' +
'\\nRendered image size: 200w x 400h (aspect-ratio: 0.50). ' +
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
Expand All @@ -105,7 +105,7 @@ describe('NgOptimizedImage directive', () => {
'with the \`ngSrc=\\"/e2e/b.png\\"`) has detected that ' +
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.60). ' +
'\\nTo fix this, update the width and height attributes.');
});
});

0 comments on commit cc964f8

Please sign in to comment.