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', () => {