Skip to content

Commit 1ebc0fa

Browse files
karadylhunn
authored andcommitted
fix(common): update size error to mention 'fill' mode (angular#47797)
The current error that is thrown when the "width" or "height" attributes is missing doesn't mention that "fill" mode is another option. This commit updates the error with that option. PR Close angular#47797
1 parent bdd4d14 commit 1ebc0fa

File tree

2 files changed

+8
-4
lines changed

2 files changed

+8
-4
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -814,7 +814,8 @@ function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) {
814814
`${imgDirectiveDetails(dir.ngSrc)} these required attributes ` +
815815
`are missing: ${missingAttributes.map(attr => `"${attr}"`).join(', ')}. ` +
816816
`Including "width" and "height" attributes will prevent image-related layout shifts. ` +
817-
`To fix this, include "width" and "height" attributes on the image tag.`);
817+
`To fix this, include "width" and "height" attributes on the image tag or turn on ` +
818+
`"fill" mode with the \`fill\` attribute.`);
818819
}
819820
}
820821

packages/common/test/directives/ng_optimized_image_spec.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -344,7 +344,8 @@ describe('Image directive', () => {
344344
'element with the `ngSrc="img.png"`) has detected that these ' +
345345
'required attributes are missing: "width", "height". Including "width" and ' +
346346
'"height" attributes will prevent image-related layout shifts. ' +
347-
'To fix this, include "width" and "height" attributes on the image tag.');
347+
'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
348+
'"fill" mode with the `fill` attribute.');
348349
});
349350

350351
it('should throw if `width` is not set', () => {
@@ -360,7 +361,8 @@ describe('Image directive', () => {
360361
'element with the `ngSrc="img.png"`) has detected that these ' +
361362
'required attributes are missing: "width". Including "width" and ' +
362363
'"height" attributes will prevent image-related layout shifts. ' +
363-
'To fix this, include "width" and "height" attributes on the image tag.');
364+
'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
365+
'"fill" mode with the `fill` attribute.');
364366
});
365367

366368
it('should throw if `width` is 0', () => {
@@ -406,7 +408,8 @@ describe('Image directive', () => {
406408
'element with the `ngSrc="img.png"`) has detected that these required ' +
407409
'attributes are missing: "height". Including "width" and "height" ' +
408410
'attributes will prevent image-related layout shifts. ' +
409-
'To fix this, include "width" and "height" attributes on the image tag.');
411+
'To fix this, include "width" and "height" attributes on the image tag or turn on ' +
412+
'"fill" mode with the `fill` attribute.');
410413
});
411414

412415
it('should throw if `height` is 0', () => {

0 commit comments

Comments
 (0)