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 d645a97e9fd7e..0970832ca4526 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 @@ -830,7 +830,8 @@ function assertNonEmptyWidthAndHeight(dir: NgOptimizedImage) { `${imgDirectiveDetails(dir.ngSrc)} these required attributes ` + `are missing: ${missingAttributes.map(attr => `"${attr}"`).join(', ')}. ` + `Including "width" and "height" attributes will prevent image-related layout shifts. ` + - `To fix this, include "width" and "height" attributes on the image tag.`); + `To fix this, include "width" and "height" attributes on the image tag or turn on ` + + `"fill" mode with the \`fill\` attribute.`); } } diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts index 8870960cee715..a6c57947a1fe0 100644 --- a/packages/common/test/directives/ng_optimized_image_spec.ts +++ b/packages/common/test/directives/ng_optimized_image_spec.ts @@ -359,7 +359,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these ' + 'required attributes are missing: "width", "height". Including "width" and ' + '"height" attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `width` is not set', () => { @@ -375,7 +376,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these ' + 'required attributes are missing: "width". Including "width" and ' + '"height" attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `width` is 0', () => { @@ -421,7 +423,8 @@ describe('Image directive', () => { 'element with the `ngSrc="img.png"`) has detected that these required ' + 'attributes are missing: "height". Including "width" and "height" ' + 'attributes will prevent image-related layout shifts. ' + - 'To fix this, include "width" and "height" attributes on the image tag.'); + 'To fix this, include "width" and "height" attributes on the image tag or turn on ' + + '"fill" mode with the `fill` attribute.'); }); it('should throw if `height` is 0', () => {