Skip to content

Commit 220d120

Browse files
karaAndrewKushnir
kara
authored and
AndrewKushnir
committed
fix(common): improve formatting of image warnings (#47299)
This is a tiny fix to add paragraph breaks in image distortion warnings to make them a bit easier to read. With this change, the intrinsic and rendered image sizes are printed on their own lines instead of mid-paragraph. PR Close #47299
1 parent 4cafd08 commit 220d120

File tree

2 files changed

+21
-21
lines changed

2 files changed

+21
-21
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -585,19 +585,19 @@ function assertNoImageDistortion(
585585
RuntimeErrorCode.INVALID_INPUT,
586586
`${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the image does not match ` +
587587
`the aspect ratio indicated by the width and height attributes. ` +
588-
`Intrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
589-
`(aspect-ratio: ${intrinsicAspectRatio}). Supplied width and height attributes: ` +
588+
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
589+
`(aspect-ratio: ${intrinsicAspectRatio}). \nSupplied width and height attributes: ` +
590590
`${suppliedWidth}w x ${suppliedHeight}h (aspect-ratio: ${suppliedAspectRatio}). ` +
591-
`To fix this, update the width and height attributes.`));
591+
`\nTo fix this, update the width and height attributes.`));
592592
} else if (stylingDistortion) {
593593
console.warn(formatRuntimeError(
594594
RuntimeErrorCode.INVALID_INPUT,
595595
`${imgDirectiveDetails(dir.rawSrc)} the aspect ratio of the rendered image ` +
596596
`does not match the image's intrinsic aspect ratio. ` +
597-
`Intrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
598-
`(aspect-ratio: ${intrinsicAspectRatio}). Rendered image size: ` +
597+
`\nIntrinsic image size: ${intrinsicWidth}w x ${intrinsicHeight}h ` +
598+
`(aspect-ratio: ${intrinsicAspectRatio}). \nRendered image size: ` +
599599
`${renderedWidth}w x ${renderedHeight}h (aspect-ratio: ` +
600-
`${renderedAspectRatio}). This issue can occur if "width" and "height" ` +
600+
`${renderedAspectRatio}). \nThis issue can occur if "width" and "height" ` +
601601
`attributes are added to an image without updating the corresponding ` +
602602
`image styling. To fix this, adjust image styling. In most cases, ` +
603603
`adding "height: auto" or "width: auto" to the image styling will fix ` +

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,28 @@ describe('NgOptimizedImage directive', () => {
3838
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
3939
'with the \`rawSrc=\\"/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. ' +
41-
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
42-
'Supplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
43-
'To fix this, update the width and height attributes.');
41+
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
42+
'\\nSupplied width and height attributes: 26w x 30h (aspect-ratio: 0.8666666666666667). ' +
43+
'\\nTo fix this, update the width and height attributes.');
4444

4545
expectErrorMessageInLogs(
4646
logs,
4747
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
4848
'with the \`rawSrc=\\"/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. ' +
50-
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
51-
'Supplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' +
52-
'To fix this, update the width and height attributes.');
50+
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
51+
'\\nSupplied width and height attributes: 24w x 240h (aspect-ratio: 0.1). ' +
52+
'\\nTo fix this, update the width and height attributes.');
5353

5454
// Images with incorrect styling
5555
expectErrorMessageInLogs(
5656
logs,
5757
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
5858
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
5959
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
60-
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
61-
'Rendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
62-
'This issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
60+
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
61+
'\\nRendered image size: 250w x 30h (aspect-ratio: 8.333333333333334). ' +
62+
'\\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.');
6565

@@ -68,9 +68,9 @@ describe('NgOptimizedImage directive', () => {
6868
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
6969
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
7070
'the aspect ratio of the rendered image does not match the image\'s intrinsic aspect ratio. ' +
71-
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
72-
'Rendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
73-
'This issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
71+
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
72+
'\\nRendered image size: 30w x 250h (aspect-ratio: 0.12). ' +
73+
'\\nThis issue can occur if \\"width\\" and \\"height\\" attributes are added to an image ' +
7474
'without updating the corresponding image styling. To fix this, adjust image styling. In most cases, ' +
7575
'adding \\"height: auto\\" or \\"width: auto\\" to the image styling will fix this issue.');
7676

@@ -82,8 +82,8 @@ describe('NgOptimizedImage directive', () => {
8282
'The NgOptimizedImage directive (activated on an \\u003Cimg> element ' +
8383
'with the \`rawSrc=\\"/e2e/b.png\\"`) has detected that ' +
8484
'the aspect ratio of the image does not match the aspect ratio indicated by the width and height attributes. ' +
85-
'Intrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
86-
'Supplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
87-
'To fix this, update the width and height attributes.');
85+
'\\nIntrinsic image size: 250w x 250h (aspect-ratio: 1). ' +
86+
'\\nSupplied width and height attributes: 150w x 250h (aspect-ratio: 0.6). ' +
87+
'\\nTo fix this, update the width and height attributes.');
8888
});
8989
});

0 commit comments

Comments
 (0)