diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
index 5b05426e731a7..3688fbe732e32 100644
--- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
+++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -161,8 +161,7 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
assertNoConflictingSrcset(this);
assertNotBase64Image(this);
assertNotBlobURL(this);
- assertRequiredNumberInput(this, this.width, 'width');
- assertRequiredNumberInput(this, this.height, 'height');
+ assertNonEmptyWidthAndHeight(this);
assertValidLoadingInput(this);
assertNoImageDistortion(this, this.imgElement, this.renderer);
if (this.priority) {
@@ -507,13 +506,17 @@ function assertNoImageDistortion(
}
// Verifies that a specified input is set.
-function assertRequiredNumberInput(dir: NgOptimizedImage, inputValue: unknown, inputName: string) {
- if (typeof inputValue === 'undefined') {
+function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) {
+ let missingAttributes = [];
+ if (dir.width === undefined) missingAttributes.push('width');
+ if (dir.height === undefined) missingAttributes.push('height');
+ if (missingAttributes.length > 0) {
throw new RuntimeError(
RuntimeErrorCode.REQUIRED_INPUT_MISSING,
- `${imgDirectiveDetails(dir.rawSrc)} has detected that the required \`${inputName}\` ` +
- `attribute is missing. Please specify the \`${inputName}\` attribute ` +
- `on the mentioned element.`);
+ `${imgDirectiveDetails(dir.rawSrc)} has detected that these required attributes` +
+ ` are missing:\`${missingAttributes.join(',')}\`. Including "width" and "height" ` +
+ `attributes will prevent image-related layout shifts. Please include "width" and ` +
+ `"height" attributes on the image tag.`);
}
}
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
index fa07b424cd885..e98efa19e1008 100644
--- a/packages/common/test/directives/ng_optimized_image_spec.ts
+++ b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -162,9 +162,9 @@ describe('Image directive', () => {
`NG0${
RuntimeErrorCode
.REQUIRED_INPUT_MISSING}: The NgOptimizedImage directive (activated on an ` +
- 'element with the `rawSrc="img.png"`) has detected that the required ' +
- '`width` attribute is missing. Please specify the `width` attribute ' +
- 'on the mentioned element.');
+ 'element with the `rawSrc="img.png"`) has detected that these required attributes are missing:' +
+ '`width`. Including "width" and "height" attributes will prevent image-related layout shifts. ' +
+ 'Please include "width" and "height" attributes on the image tag.');
});
it('should throw if `width` is 0', () => {
@@ -211,9 +211,9 @@ describe('Image directive', () => {
`NG0${
RuntimeErrorCode
.REQUIRED_INPUT_MISSING}: The NgOptimizedImage directive (activated on an ` +
- 'element with the `rawSrc="img.png"`) has detected that the required ' +
- '`height` attribute is missing. Please specify the `height` attribute ' +
- 'on the mentioned element.');
+ 'element with the `rawSrc="img.png"`) has detected that these required attributes are missing:' +
+ '`height`. Including "width" and "height" attributes will prevent image-related layout shifts. ' +
+ 'Please include "width" and "height" attributes on the image tag.');
});
it('should throw if `height` is 0', () => {